jQuery事件在站点加载时触发一次

Question

我正在尝试仅在用户登陆首页时淡入div一次。 例如，“站点首页标题”在您进入网站时会淡出，您将导航至“关于”，“联系人”页面等，但是当您再次单击主页时，“站点首页标题”不会​​消失在。

所以在div上，我得到了：

$('#home-title').fadeIn(500);

所以我的问题是，现在每当您进入主页时，它总是使它褪色……显然，因为这就是代码告诉它要做的事情。 但是，我要添加什么，以便它只有在您首次进入首页时才发生一次？

[抱歉！ 下面有更多详细说明]

我有这个：

$(document).ready(function() { 
    $('.faded').hide();
});


$(window).load(function() {     
    $(".faded").each(function(i) {
        $(this).delay(i * 500).fadeIn();  
    });
}

因此，.faded仅附加到主页上的div。 我想知道jQuery是否可能识别出它是否在其他页面之一上，然后单击返回首页-它已经在元素中消失了，因此不需要再次执行。 但是，如果用户关闭浏览器或完全离开该站点但又回到了该站点，我们是否可以使.faded div再次消失？

Answer 1

如果旧的浏览器是一个问题，那么您将需要Cookie，并且这里有一个不错的jQuery插件！

否则我会选择localStorage，因为它更容易处理：

var elem = $('#home-title');

if (elem.length) {                                  //you're on the first page
    if (!sessionStorage.getItem('HasVisitedFirst')) {  //check if we have been here
        elem.fadeIn(500);                            //if not, fade in  
        sessionStorage.setItem('HasVisitedFirst',true);//and set a value to remember
    }
}

小提琴

Answer 2

根据您使用的后端，可以检查是否已设置会话或其他cookie，如果不存在则请淡入。

由于您使用的是jQuery，因此有一种简单的方法来设置/获取您自己的cookie。 我整理了一个快速的jsfiddle来向您展示一个示例。

编辑：我应该提到，此解决方案需要jquery-cookie插件。 如果您希望它在第一次加载后永久显示而没有fadeIn，只需将css display属性设置为block（假设您首先使用css将其隐藏）：

$('#home-title').css('display', 'block');

这是更新的小提琴 。