jQuery:如何仅在永久网站元素中淡出一次?

时间:2011-06-02 17:59:01

标签: jquery animation conditional

我正在构建的网站在每个页面上都有一些相同的元素,例如徽标,菜单,版权声明等。

我希望一旦访问者加载任何网站的页面就淡化它们,并且永远不会重播访问者可能到达的任何其他页面的淡入效果。

我知道制作网站AJAXy将是解决方案之一,但出于某些原因,在这种特定情况下,具有单独页面将是更可取的。

也许有办法检查一个元素的不透明度(来自上一页?)和如果它是100%保持原样,否则淡入元素 - 但我不确定它是如何完成的。或者 - 也许,如果有办法检查 if 访问者是否从相同的主域名到达某个页面,在这种情况下,所有元素的不透明度应该等于100%,否则 他们应该淡出?

我很感激实用的解决方案!

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

4 个答案:

答案 0 :(得分: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();
}

答案 1 :(得分:1)

您可以查看客户的推荐人(使用JavaScript) - 如果它包含您的域名,则您知道该用户来自您网站上的其他网页。

类似......(未经测试)

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

这将显示用户每次从其他位置访问您的网站时的动画 - 而使用Cookie方法,如果用户之前曾在那里,您将知道Cookie的生命周期。

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

答案 2 :(得分:0)

你可以“只使用一个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...
});

答案 3 :(得分:0)

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