Question

我正在使用cookie来运行或不运行其他人构建的jQuery动画：

 $(function () {
     $('div.transitional').click(function () {
         $('div.intro').removeClass('hidden');
         $('div.final').off('click');
     });

     ShowDiv($("div.transitional.hidden")[0]);
 });

 function ShowDiv(target) {
     target = $(target);
     target.removeClass('hidden');

     target.delay(500).animate({
         opacity: 1.0
     }, 300, 'easeInExpo', function () {
         ShowDiv($("div.transitional.hidden")[0]);
     })
 }

我有cookie部分工作，但我对匿名函数和“ShowDiv”函数感到困惑。

每个部分在做什么？

从功能上讲，动画可以看到一系列图片，然后是整个网站。我想跳过动画，只是让整个网站可见（如果cookies ='visit'。）我想在不重写动画脚本的情况下这样做。

这是一个链接：http://claytonsalem.com/bottlecap。

现在发生的事情是，如果你有动画没有运行的cookie并且一切都被隐藏了。

Answer 1

该脚本只会逐个淡入元素。如果你想跳过它，在匿名函数（也称为DOM就绪处理程序）中使用类似的东西：

$(function() {
    $('div.transitional').click(function() {
        $('div.intro').removeClass('hidden');
        $('div.final').off('click');
    });

    if(cookies === "visited") //Assuming you already have the variable set.
        ShowDiv($("div.transitional.hidden")[0]);
    else
        $("div.transitional.hidden").css('opacity', 1).removeClass('hidden')
});

Answer 2

我将专注于它的工作原理：

$("div.transitional.hidden")

这将选择带有div.transitional.hidden的所有元素，并将它们放在列表中。

通过在选择器中放置[0]，我们只选择此列表中的第一个元素。

然后，当脚本开始运行时，target.removeClass('hidden')会修改此元素，从而删除隐藏的类。

当脚本结束时，它会再次调用$("div.transitional.hidden")[0]选择器，但这次它不会包含先前选择的元素（因为它不再具有hidden类）。

这就是脚本一个接一个地显示图像的原因：它删除hidden类并选择下一个剩余元素。

您可以参考Karl关于如何展示整个网站的答案。

这个动画是如何工作的？

2 个答案: