Search code examples
jqueryslidedownslideup

JQuery - Homepage slide animation on page load, but only once for each viewer

What's the best way to slide two divs into each other. Basically, I split my homepage into two sections. I want them to slide down and slide up into each other, but happen only once for each viewer. 

<div id="wrap">
 <div id="slideDown">Slide down</div>
 <div id="slideUp">Slide up</div>
</div>
Solution

  • You're going to need to use jQuery's animation effects slideUp and slideDown (see tandu's answer) or just use animate if you're feeling more verbose.

    But, in order to stop the browser from executing this animation on a return visit, you're going to need to store a cookie. The jquery-cookie plugin is a good place to start. Basically what you're going to want to do is:

    1. Check for presence of doNotLoadAnimation cookie.
    2. If not present, set doNotLoadAnimation cookie and show animation, else show the page w/o the animation

    It isn't going to be perfect because cookies aren't a form of persistent storage, e.g. if a user clears their cookies, the animation will execute again.

    Hope that helps!