Javascript 使用jQuery cookie仅旋转图像一次

在页面加载时，我将图像旋转一段时间，并使用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');
    }
});

---

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

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

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

---

PoC:

像这样的怎么样

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

---

好的，伙计们，谢谢你们的帮助。我只是写了一个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');
    }
});

---

Thnx回答：我试过了，但它甚至阻止了旋转。我正在检查另一个操作是否与此相矛盾…不，相同的问题…在第一次加载时会旋转，但当我导航并再次返回时，它会旋转到dbl check，您能否验证您是否删除了之前设置的cookie。清理你的cookies，然后再试一次。看这里，同样的问题似乎有一个公认的答案。不过，这个问题的关键是使用延迟，而不是设置间隔。我检查了它，我试着在第一次加载时它会旋转，当我导航并返回时它会阻止旋转，它只显示图像。我编辑代码。你可以检查一下