javascript - 如何在页面加载时淡入淡出元素而不是“出现”？

我在jquery上确实非常菜鸟，我需要弄清楚如何更改此代码：

$('.social li').appear();
$(document.body).on('appear', '.social li', function(e, $affected) {
    var fadeDelayAttr;
    var fadeDelay;
    $(this).each(function(){


        if ($(this).data("delay")) {
            fadeDelayAttr = $(this).data("delay")
            fadeDelay = fadeDelayAttr;
        } else {
            fadeDelay = 0;
        }
        $(this).delay(fadeDelay).queue(function(){
            $(this).addClass('animated').clearQueue();
        });
    })
});

以某种方式工作，即一旦有人进入登录页面，它将立即开始动画，现在它可以在除IE10和IE11之外的所有内容上正常工作，被告知将其更改为默认情况下加载而不是“出现”，但我尝试了文档准备/ load，但我无法正常工作...

最佳答案

您可以尝试将所有列表项淡化到视图中，每个项都有250ms的延迟：

$(window).load(function() {
   $('.social li').hide().each(function(i) {
      $(this).delay((i + 1) * 250).fadeIn(2000);
   });
});

编辑：

使用与您之前的代码相同的逻辑进行重构，请使用window.load方法，因为load事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧等都已完成加载。因此，使用此事件可以使列表项的动画淡入到视图中，从而隐藏其初始状态。

您有两个声明为fadeDelayAttr和fadeDelay的变量，但我注意到仅使用了fadeDelay，因此可以丢弃fadeDelayAttr。另外，这部分代码：

   if ($(this).data("delay")) {
        fadeDelayAttr = $(this).data("delay")
        fadeDelay = fadeDelayAttr;
    } else {
        fadeDelay = 0;
    }

可以使用逻辑OR (||)简化为null-coalescing运算符：

var fadeDelay = $(this).data("delay") || 0;

由于fadeDelay变量是从data-delay属性获取其值的，因此可以将其作为delay方法的参数传递，最后重构后的代码将如下所示：

$(window).load(function() {
    $('.social li').hide().each(function() {
        var fadeDelay = $(this).data("delay") || 0;
        $(this).delay(fadeDelay).fadeIn(2000);
   });
});

Working Demo