Question

在页面加载中，我将图像旋转一段时间并使用jQuery隐藏。但是，当我导航到其他页面并再次返回到第一个页面时，它再次加载该图像。如何才能使旋转仅在第一页加载时发生？

PS：我知道我必须使用cookies，但我无法正确地做到这一点。有人可以帮忙吗？

以下是旋转图像的代码：

$(document).ready(function(){
    var angle = 0;
    setInterval(function(){
        angle+=3;
        $("#loading").rotate(angle);
    }, 50);
});

我尝试在轮换之前将默认cookie设置为true，然后更改它，但它不起作用。

$.cookie('visited', true);
    $(document).ready(function(){
        if( $.cookie('visited') == true){
            var angle = 0;
            setInterval(function(){
                angle+=3;
                $("#loading").rotate(angle);
            },50);
        $.cookie('visited', false);
    }
});

我想知道这是否与smth相矛盾：

$(document).ready(function(){

    //Initial loading, after 3 seconds fadeout the loading and show the menu
    $("#loading").delay(3000).fadeOut("slow");
    $(".logo").delay(3500).fadeIn('slow');
    $("footer, nav").delay(4000).fadeIn('slow');
});

在这里，我尝试制作一种动画。徽标，页脚和导航用CSS隐藏，然后我淡入其中。

我试过了：

$(document).ready(function(){
    if ($.cookie('hasSeenAnimation') == null){
        var angle = 0;
        setInterval(function(){
            angle+=3;
            $("#loading").rotate(angle);
        },50);

        //Initial Loading, after 3 seconds fadeout the Loading and show Menu
        $("#loading").delay(3000).fadeOut("slow");
        $(".logo").delay(3500).fadeIn('slow');
        $("footer, nav").delay(4000).fadeIn('slow');

        $.cookie('hasSeenAnimation','true');
    }
});

但现在在第一次加载时它会旋转......当我导航并返回时，它会显示旋转的图像，但会阻止旋转（它不会旋转）。

Answer 1

您每次在页面加载时重置cookie，而不是尝试

$(document).ready(function () {
    if (!$.cookie('visited')) {
        var angle = 0;
        setInterval(function () {
            angle += 3;
            $("#loading").rotate(angle);
        }, 50);
        $.cookie('visited', true);
    }
});

PoC：Fiddle

Answer 2

这样的事情怎么样。

$(document).ready(function(){
    if( $.cookie('visited') != true){
        var angle = 0;
        setInterval(function(){
            angle += 3;
            $("#loading").rotate(angle);
        },50);
        $.cookie('visited', true);
    }
});

Answer 3

好的，伙计们感谢您的帮助。我只是设法做了else声明。

以下是有人遇到相同问题的代码（请注意，这不是最好的答案，因为我是jQuery的新手）：

$(document).ready(function(){
    if ($.cookie('hasSeenAnimation') == null){
        var angle = 0;
        setInterval(function(){
            angle+=3;
            $("#loading").rotate(angle);
        },50);

        //Initial Loading, after a 3 sec fadeout the loading and show the menu
        $("#loading").delay(3000).fadeOut("slow");
        $(".logo").delay(3500).fadeIn('slow');
        $("footer, nav").delay(4000).fadeIn('slow');

        $.cookie('hasSeenAnimation', 'true');
    }
    else{
        $("#loading").hide();
        $(".logo").delay(300).fadeIn('slow');
        $("footer, nav").delay(600).fadeIn('slow');
    }
});

使用jQuery cookie仅旋转一次图像

3 个答案: