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

林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什么都好，被告知要更改默认情况下它不会对“出现”，但我试过文件准备/负载，我无法得到它的工作负荷...

来源

2014-06-27 user3782651

u能给予的jsfiddle – dev

http://jsfiddle.net/F9We7/这是的jsfiddle，希望这使得它更清楚 – user3782651

你可以尝试褪色所有列表项眼帘，每一个progessing 250ms的延迟：

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

EDIT：

使用相同的逻辑以前的代码重构，使用由于在文件加载过程结束加载事件火灾window.load方法。在这一点上，所有的文档中的对象都在DOM，和所有的图像和子帧等已完成加载。所以使用这个事件做衰落列表中的项目进入视野，他们的初始状态将被隐藏的动画。

你有两个变量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变量获得从数据延迟属性它的值，这可以被传递中作为延迟方法的参数，最后重构的代码看起来就像这样：

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

Working Demo

来源

2014-06-27 11:09:22 chridam

我很抱歉，我太小白要做到这一点，如何编辑我的脚本张贴或在哪里添加你的，我应该删除我的呢？ – user3782651

我编辑了包含必要重构的答案。 – chridam

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

回答

相关问题