Question

我目前正在创建我的第二个网站，我第一次使用Jquery。当你加载主页时，我想按照顺序顺序在页面的一侧淡入4个小方块。

我设法做到了！它看起来很棒，但我不希望每次观众点击不同的页面时都会发生这种效果。

如果有人能告诉我如何对这个动画进行编码，那么它会在我的索引页面上消失，我将非常感激。

我目前的代码列在下面，

非常感谢！

$(document).ready(function(){

  $('.wrapper').fadeIn(1000);

  $("#BlockOne").fadeIn('slow');

  $("#BlockTwo").fadeIn(2500);

  $("#BlockThree").fadeIn(2500);

  $("#BlockFour").fadeIn('slow');

});

Answer 1

仅将代码放在主页上的脚本块中。大概所有其他页面都需要单独的CSS以确保您始终可以看到块。

Answer 2

有很多方法可以解决这个问题。

您不能在主页以外的页面上输出此javascript。如果您需要使隐藏元素显示在其他页面上的功能，您可以只执行一个替代javascript，在没有fadeIn的情况下立即显示它们。

您可以在所有页面上输出一个常用功能，但在文档位置使用条件来确定是淡入还是立即显示。

您可以在Cookie或HTMLS localStorage或会话存储中保存一些值，以充当标志，以确定是否以淡入或立即显示。

我个人更喜欢后者，因为用户没有通过主页到达您的网站？我认为你的意图是在第一个访问页面上实现淡入效果，而不一定是主页。

Answer 3

在按钮的单击事件处理程序中定义代码，并使用 .one 绑定它。

然后触发点击事件..看起来有效..

$(document).ready(function() {
    // This will fire only once..
    $('button').one('click', function() {
        $('.wrapper').fadeIn(1000);
        $("#BlockOne").fadeIn('slow');
        $("#BlockTwo").fadeIn(2500);
        $("#BlockThree").fadeIn(2500);
        $("#BlockFour").fadeIn('slow');
    });

    $('button').click();
});

jQuery的。我已经达到了我想要的效果，但我只想让它在主页上工作

3 个答案: