javascript - 如何在页面加载时淡入元素而不是 "appear"？

Question

我是 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 之外的所有浏览器上都能正常工作，被告知将其更改为默认加载，而不是在“出现”时加载，但我尝试文档准备/加载，但我无法让它工作......

Answer 1

您可以尝试将所有列表项淡入 View ，每个列表项都有 250 毫秒的延迟:

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

编辑:

使用与之前的代码重构相同的逻辑，使用 window.load 方法，因为 load 事件在文档加载过程结束时触发。至此，文档中的所有对象都已在 DOM 中，并且所有图像和子框架等都已完成加载。因此，使用此事件使列表项以动画方式淡入 View ，其中它们的初始状态将被隐藏。

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

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

可以使用逻辑OR (||)简化为空合并运算符:

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

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

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

<强> Working Demo