使用 jQuery cookie 仅旋转一次图像答案

【问题标题】：Rotating an Image only once with a jQuery cookie使用 jQuery cookie 仅旋转一次图像
【发布时间】：2016-10-18 04:34:10
【问题描述】：

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

PS：我知道我必须使用 cookie，但我无法正确使用。有人可以帮忙吗？

这是旋转图像的代码：

$(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');
    }
});

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

【问题讨论】：

标签： javascript jquery cookies rotation

【解决方案1】：

您在每次页面加载时都重置 cookie，改为尝试

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

PoC：Fiddle

【讨论】：

谢谢回复：我试过这个，但它甚至阻止了旋转。我正在检查另一个动作是否与此相矛盾...

【解决方案2】：

这样的事情怎么样。

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

【讨论】：

不，同样的问题...在第一次加载时旋转，但是当我导航并再次返回时它会旋转
只是为了dbl检查，你能确认你删除了你之前设置的cookie。清除您的 cookie，然后尝试。
看这里，与已接受的答案似乎相同的问题。不过，该问题的 OP 使用的是 delay 而不是 setInterval 。 stackoverflow.com/questions/6239020/…
我检查了它，我现在尝试在第一次加载时旋转，当我导航并返回时它会阻止旋转，它只显示图像。我编辑代码。你可以检查一下

【解决方案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');
    }
});

【讨论】：