Replicating flash sliding effect with jQuery

I was recently tasked with replicating http://www.rasikarestaurant.com/rasika.html in HTML5 and jQuery.

I'm currently struggling to do the effect where the menus slide up behind the images when an arrow is clicked (See the Menu section for the best example) and was wondering if this is actually possible in jQuery.

So far I have http://jsfiddle.net/wxRnf/1/ which is sort of getting there but I'm not sure it's the best approach.

Any advice you could offer would be great! Thanks.

--------------Solutions-------------

The image makes a good reference point. So by using the currently clicked element and by finding the nearest sibling 'the-box' you can gather all the html elements. Then you can clone them, but hidden, to either before or after the-box depending if you found a prev or next sibling. Finally you execute an animation close at the same time as an animation up to get the one disappears/one appears affect. Definitely doable I would say.

Category:jquery Time:2011-06-02 Views:0

Related post

  • sliding effect with jquery 2010-11-01

    i have seen a nice sliding effect in this site: http://www.fnxcard.com/ browse to the bottom of page and there are some icons there that have a smooth sliding movement. i don't think they used jquery but i want to know what the jquery plugin is with

  • sliding effect using jQuery 2011-10-20

    how can one achieve the effect (sliding) in the link below? http://www.indochino.com/customizations/display/1230898280?productAdded=1 How would I go about designing this? Would I align all the divs next to each other and wrap them in a centered div o

  • Jquery - animating a sliding effect 2011-10-11

    Here is the javascript function in which I am trying to bring about a sliding effect. What I want is, upon clicking the right button (green coloured button), the sliding effect should replace the tab with another tab, all are block elements. However,

  • JQuery Toggle with sliding effect or similar 2012-01-05

    I am working with this code: <script type="text/javascript"> $(function(){ $('#MyLink').click(function(){ $('#DivA').toggle(); $('#DivB').toggle(); }); }); </script> I just need to add some sliding to it of some other effect so that you c

  • rollover effect using Jquery 2008-11-04

    Would you please help me in making a rollover effect using jquery, what i want to do is when someone hover over any of the menu items the text slide down and disappear and a picture slides from the top down to the center (e.g. you could see this effe

  • Really smooth animate effects with jQuery 2010-01-12

    I have some jQuery set up on my page to swap out some DIVs when a user clicks a link. The DIVs have flash objects, paragraphs and images inside them and when I click the link to swap it out the effects aren't exactly... smooth. This is my code: $('#d

  • menubar's sliding effect and tabs not appear 2010-07-29

    dear all... I want when pointing from one menu to another menu, the menu looked like a sliding board. i can show that after downloaded at apycom.com, beside that, i have a jquery-ui tabs in input.php. the problem comes after i have included that menu

  • slide effect with jquery 2010-08-17

    I'd like to create a slide effect using jQuery. I have several div's: <div id='div_1'>content currently displayed</div> <div id='div_2' style="display:none">content to be loaded</div> <div id='div_3' style="display:none"

  • Page transition slide effect with jQuery 2011-03-14

    I have a web site and I want to add a sliding effect when changing a page. So for example when I am in index.php and click the button ENTER I want the page enter.php to open as a layer above index.php with a transparency. I want also the page enter.p

  • Appear with sliding effect? 2011-04-27

    I have a div I'm making appear when a form is submitted. document.getElementById('onsubmit').style.display = 'block'; I want it to make it appear with a sliding effect. So it moves everything down as it makes size for itself. I believe it's done with

  • How can I improve the sliding effect on my website header? 2011-07-28

    This is how I made the sliding effect on this page: dmg-01.net: $(document).ready(function(){ $(".trail-text").attr("style", "display:none;"); if ($("#one,#two,#three,#four,#five")) { var pixies = $("#one,#two,#three,#four,#five"); $("#one,#two,#thre

  • How to add Sliding affect to Jquery Top Panel 2011-10-24

    I am using a top Panel Drop Down. Something similar to this http://www.yootheme.com/tools/extensions/yootoppanel Initially it was in mootools. But i was having issues in IE8. So i thought to change it to Jquery. I have made the slidedown and slide up

  • Apple Cover-flow effect using jQuery or other library? 2008-09-15

    Does anyone know how to achieve the cover-flow effect using JS to scroll through a bunch of images. I'm not talking about the 3d rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you

  • do you have Flash or flex or jquery header animation like this url site http://www.zhoyosoft.com? 2009-03-25

    Do you have Flash or flex or jQuery header animation like this url site http://www.zhoyosoft.com? Is it possible can do in jQuery and also flex? --------------Solutions------------- Here are two options: With jQuery, you can use: http://plugins.jquer

  • Flash on top of jQuery dialog 2009-10-04

    I know many have asked this question, but I think my situation is a little bit different. I have a site where I have some ads which is Flash hidden in a because of xhtml/html compatibility issues. But the flash elements is on top of my jQuery dialogs

  • Give shadow effect using jQuery 2011-03-20

    i want to give overlay and shadow effect using jQuery.i have difficulty in using it --------------Solutions------------- You do not need a shadow plugin for this. Use the following cross browser shadow CSS properties and put them in a class name .sha

  • how do i vertical scroll to an element using a nice animation effect with jquery? 2011-03-24

    How do i vertical scroll to an element using a nice animation effect with jquery? i have an alphabet menu like this: <ul id="alphabet"> <li><a href="#A">A</a></li> <li><a href="#B">B</a></li> <

  • Flipping / Sliding Effect with Winforms 2011-05-03

    I am trying to make an Flipping / Sliding Effect with Winforms. To be exact: a effect where the first Form slides/ is pushed out of the screen and the second one slides in. After a lot of research I came to the conclusion that a Flipping effect is no

  • How can I achieve this effect with jQuery 2011-06-17

    I really like the effect of the blocks moving towards you and slight animation in this effect, this developer seems to be using Mootools, and ideas on how to achieve this or a similar effect in jQuery? http://ultranoir.com/en/#!/blog/home/ ----------

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 1.078 (s). 13 q(s)