如何使用jQuery Cookie插件让jQuery在页面重新加载后记住动画

时间:2013-01-14 08:58:43

标签: jquery jquery-cookie

我正试图在Facebook上制作侧边栏。好吧,不完全是。我只想记住重新加载后或进入不同页面后的jQuery状态。我不明白如何使用cookie插件。我在哪里把它放在这个脚本上?它是如何写的?我下载了插件,它在html文件中,但我不知道如何通过jQuery执行它。

$(document).ready(function(){
    $("#arrow").bind('click', function(){
        $('#wrappernav').fadeOut("fast");
        $('#sidebar').fadeOut("fast");
        $('#wrappernavbg').fadeOut("fast");
        $('#naviclosed').fadeIn("fast");
        $(window).unbind('resize');
     //I want jQuery to remember this state after refresh.

    });
    $('#naviclosed').bind('click', function () {
        $('#wrappernav').fadeIn("fast");
        $('#sidebar').fadeIn("fast");
        $('#wrappernavbg').fadeIn("fast");
        $('#naviclosed').fadeOut("fast");
        $(window).bind('resize', ScreenSize);
    });
});

1 个答案:

答案 0 :(得分:1)

对您的代码稍作修改:

<script>
function clickArrow()
{
    $('#wrappernav').fadeOut("fast");
    $('#sidebar').fadeOut("fast");
    $('#wrappernavbg').fadeOut("fast");
    $('#naviclosed').fadeIn("fast");
    $(window).unbind('resize');
}

$(document).ready(function(){

    //Do the animations automatically IF the cookie value was SET.
    var arrowClicked = parseInt($.cookies.get('arrowClicked')); 
    if (arrowClicked > 0) {
        clickArrow(); 
    }

    $("#arrow").bind('click', function(){

     //Perform actions
     clickArrow();

     //I want jQuery to remember this state after refresh.
     $.cookies.set('arrowClicked', 1);
    });

    $('#naviclosed').bind('click', function () {
        $('#wrappernav').fadeIn("fast");
        $('#sidebar').fadeIn("fast");
        $('#wrappernavbg').fadeIn("fast");
        $('#naviclosed').fadeOut("fast");
        $(window).bind('resize', ScreenSize);
    });
});

有关Cookie插件的详细信息,请访问此链接:http://code.google.com/p/cookies/

另请在jquery.js

之后加入jquery.cookie.js