How to stop jQuery animation restarting on page refresh?

Question

I have created a search form animated with jquery, like this NextLevelSearch. I want that when I open the search form and refresh page this doesn't close. How can i accomplish this?

I tried with e.preventDefault(); and return false; but doesn't work, and I know that has nothing to do with my issue.

This is my code:

$globalsearch_submit.click(function(){
    $('#stat').hide();
    $('.wrapper-simple').animate({'width':'275px'})
        .end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1}) 
        .end().find('.wrapper-simple .button').animate({ 'right': '40px' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'235px', opacity: 1}, 10)               
    return false;
}); 
$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({opacity:1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
        .end().find('.wrapper-simple .button').animate({ 'right': '0' })
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', ''); 
    return false;
});

Please help! Thank you.

(i'm sorry for my bad english)

Use [cookies](http://www.electrictoolbox.com/jquery-cookies/). — SeinopSys, Mar 01 '13 at 21:26
As @DJDavid98 said. http://stackoverflow.com/questions/14134544/loading-welcome-animation-only-once-jquery-php/14135278#14135278 In this answer I set the cookie when document is ready, but in your case you'd probably want to set it inside the animation callback. Then on document ready check if the cookie is set and if it is, add the necessary styling to show the search box. — Joonas, Mar 01 '13 at 21:37

score 2 · Answer 1 · edited May 23 '17 at 11:51

I would use the document hash (window.location.hash) to save the current state of the page;

$('.wrapper-simple input[type=submit]').click(function() {
    $('#stat').show();
    $('#stat').delay(500).css('opacity',0).show().animate({'opacity':1},100); 

    $('.wrapper-simple').animate({'width':'40px'}) 
        .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', 'opacity': 0})
        .end().find('.wrapper-simple .button').animate({'right': 0})
        .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft': 0, 'opacity': 0}).attr('value', '');

    document.location.hash='form';

    return false; // not related to this, but needed for other reasons
});

(in that example I set it to "form", so your page's URL will display as "mysite.com/mypage.htm#form" after clicking the button. You can use anything you like, with certain restrictions on which characters are allowed — see this answer: List of valid characters for the fragment identifier in an URL?)

You can then detect this tag when the page loads:

$(document).ready(function(){
    var h=window.location.hash.replace(/^#/,'');
    if(h==='form'){
        $('#stat').css({'opacity':1}).show(); 

        $('.wrapper-simple').css({'width':'40px'}) 
            .end().find('.wrapper-simple input[type=text]').css({'width': '1px', 'opacity': 0})
            .end().find('.wrapper-simple .button').css({'right': 0})
            .end().find('.wrapper-simple input[type=submit]').css({'marginLeft': 0, 'opacity': 0}).attr('value', '');
    }
}

Notice that I've copied the code but changed any animate calls to simple css calls, to change it instantly.

This means that once your user clicks the button, any refresh of the page, or bookmarking, closing, and re-opening from the bookmark, etc. will mean the form is open immediately (with a slight flicker as the page loads, which is more work to avoid). Also this does not use cookies, which are increasingly problematic. To mark the form as closed again, you can just set the hash to something else (such as an empty string).

Twitter, Google, Facebook and many others use this technique.

How to stop jQuery animation restarting on page refresh?

1 Answers1