jQuery：如何只淡入永久网站元素一次？答案

【问题标题】：jQuery: how to fade in permanent website elements only once?jQuery：如何只淡入永久网站元素一次？
【发布时间】：2011-09-07 06:45:01
【问题描述】：

我想在访问者加载网站的任何页面后将它们淡入，并且永远不要为访问者可能到达的任何其他页面重放淡入效果。

我知道创建网站 AJAXy 将是解决方案之一，但出于某些原因，在这种特殊情况下最好使用单独的页面。

也许有一种方法可以检查元素的不透明度（来自上一页？）并且如果它是 100% 保持原样，否则淡入元素 - 但我不确定它是如何完成的。或者 - 也许，如果有办法检查是否访问者从同一个主域名到达页面，在这种情况下，所有元素的不透明度应该等于 100%，否则他们应该淡入吗？

我希望有一个实用的解决方案！

StackOverflow 上的其他人在类似情况下写了“只使用 cookie”，并接受了一个解决方案，但没有提供 cookie 的实际示例，如果有人能做到这一点，那将是最有帮助的。

【问题讨论】：

“只使用一个cookie”的答案是要走的路。 $.cookie 让这变得非常简单。
谢谢马特。你能告诉我它是怎么做的吗？实际代码？我是初学者。

标签： jquery animation conditional

【解决方案1】：

您可以为每个加载的元素设置一个唯一的 cookie 值，并在每个页面上检查它以确定是否淡入。

http://plugins.jquery.com/files/jquery.cookie.js.txt

var loaded = $.cookie('loaded');
loaded = (typeof(loaded) == 'string') ? loaded.split('|') : [];
if($.inArray('unique_key', loaded) == -1) {
  alert('first load');
  $('#element').fadeIn();
  loaded.push('unique_key');
  $.cookie('loaded', loaded.join('|'));
} else {
  alert('subsequent load');
  $('#element').show();
}

【讨论】：

Devmatt，这很有帮助，但您能告诉我如何实现该插件以达到我想要的结果吗？
这看起来很不错，但是当我测试它时，它不起作用。我可能做错了什么。我下载了 jquery.cookie.js 文件并将其注册到我的标题中，我在正文中创建了#element div，我将您在脚本标记和文档就绪事件中编写的代码的 sn-p 包装起来，并将其放在标题中在脚本注册下方。什么都没有发生，#element 只是停留在那里，即使是第一次也不会消失。我究竟做错了什么？例如，也许您可以在 jsfiddle 上进行快速演示？我将不胜感激！
尝试在 if 语句中添加警报并检查萤火虫是否有任何错误被抛出。
你能告诉我警报的代码吗？（我是初学者。）
谢谢。我重置了浏览器，粘贴了新代码并进行了测试。没有警报，没有淡入效果。请帮忙？

【解决方案2】：

您可以查看客户的引荐来源网址（使用 JavaScript） - 如果它包含您的域，您就知道用户来自您网站上的另一个页面。

类似...（未经测试）

if (document.referrer.indexOf('www.mydomain.com' === -1) {
  // show animation
}

这将在用户每次从另一个位置访问您的网站时显示动画 - 而使用 cookie 方法，如果用户之前曾去过那里，您将知道 cookie 的整个生命周期。

此外，这种方法可能需要修改以使用不区分大小写的正则表达式，因为我认为 indexOf 区分大小写，并且可能有人输入了错误的 URL

【讨论】：

这是有希望的。如何使用警报框进行测试？
alert(document.referrer.match(/stackoverflow/i) ? '上一页堆栈溢出' : '上一页其他内容')
关于上述 - 注意正则表达式中的特殊字符（例如句点 ( . ) ）

【解决方案3】：

您可以“仅使用 cookie”来标记动画已播放。哈哈，刚看到你帖子的最后一部分。我是这个图书馆的粉丝jQuery Cookie。另外，我将它包装在一个数据提供者 JS 类中，如下所示：

mycompany.data.cache = {
    grab: function(key){
        return $.evalJSON($.cookie(key));
    },
    push: function(key, value){
        $.cookie(key, $.toJSON(value), {path: '/', expires: 7});
    },
    remove: function(key){
        $.cookie(key, null);
    }
};

所以你可以写

$(document).ready(function(){
    bool animationPlayed = mycompany.data.cache.grab('animationPlayed');

    if(!animationPlayed)
        //play animation...
    else
        //do something else...
});

【讨论】：

这可能是一个很好的解决方案，但是您能否更具体地向我解释一下这段代码应该如何放置？应该将它们全部包装在一个事件处理程序中，还是应该放在页面的不同部分？

【解决方案4】：

不确定您的后端框架是什么，但在 ASP.NET 中，您可以检查 Session.IsNewSession 并为这些元素添加一个类（即 firstTimeFadeIn），如果它是真的...运行淡入的 jQuery 代码该类的所有项目都很容易。

【讨论】：

谢谢谢恩。我正在使用 PHP，但我想要一种不依赖于服务器的解决方案。