Question

好的，我有一个菜单栏，可以从屏幕顶部向下拨动。我只希望用户在第一次访问该网站时看到此内容。如何防止它在他们去的每个后续页面上播放？

我的jQuery：

$(function() {

    $(".bar-top").delay(700).animate({
        marginTop: '0px'
    }, 750, 'swing');


    if ( $(".banner-title").css('display') == 'block' ) {
        $(".banner-title").delay(1500).addClass("fade");
        $(".fade").fadeIn("slow");
        $(".fade").hide();
    }

});

我已经研究过设置一个cookie，但是到目前为止还没有正常工作。主要是因为我不知道如何在cookie if语句中包装它。 banner-title只是一些与导航一起淡入的文本。

我在想是否有办法可能只在索引页面上运行代码，并阻止它在其他地方运行？这可能不是一个很好的解决方案。

Answer 1

假设您的用户未通过您的网站进行身份验证，则在页面请求之间保持状态的唯一方法是设置Cookie。

有一个很棒的用于Cookie管理的JavaScript API，您应该查看 - https://github.com/js-cookie/js-cookie

当用户点击您的网站时，您可以检查您的Cookie，看看他们之前是否曾在那里。如果他们没有，则显示您的动画并设置cookie。如果他们没有运行动画。

只需查看js-cookie个文档，您就可以设置7天的Cookie，如下所示：

Cookies.set('visited', 'value', { expires: 7 });

所以你的代码可能如下：

// Make sure DOM has fully loaded before running code
$(function(){
    if( ! Cookies.get('visited')){
        // Your code here
        Cookies.set('visited', 'yes', { expires: 7 });
    }
});

编辑以回答您问题的其他部分（感谢提醒Max Allen！）

要仅在某些页面上运行代码，我建议在页面的body标签上使用ID（以及类，如果您愿意）。 e.g。

if ($('body#index').length){
    // Code to only run on index page
}

Answer 2

好吧，@ Tim Fletcher回答了你的一些问题。

我在想是否有办法可能只在索引页面上运行代码，并阻止它在其他地方运行？这可能不是一个很好的解决方案。

那么可能有一个解决方案：

if(window.location.pathname == '/index.html'){
//Your code
}

但我不会说这是好有坏。但它可能会奏效。

Jquery cookie只运行动画一次

2 个答案: