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之外它在除了IE10和IE11之外的所有内容都有效，被告知要将其更改为默认加载而不是“出现”但是我尝试文件准备/加载，我无法让它工作......

Answer 1

您可以尝试将所有列表项淡入视图，每个项目都有250毫秒的延迟：

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

修改：

使用与之前代码相同的逻辑进行重构，使用window.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

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

1 个答案: