javascript - jQuery - 淡入由类选择的对象

Question

我试图一次选择几个元素并在窗口加载时淡入它们。显而易见的

$('.home').delay(200).fadeIn(400);

没有用，也没有

$('.home').each(function(){
    $(this).delay(200).fadeIn(400); 
});​

最好的方法是什么？

http://jsfiddle.net/FaqBX/4/

Answer 1

您需要在它们淡入之前隐藏它们。

Answer 2

你需要$(window).ready代替而$(window).load不是document.load。他们需要先隐藏：http: //jsfiddle.net/f3XhW/

Answer 3

尝试这个：

setTimeout(function () {
    $('.home').fadeIn(400);
}, 200);

Answer 4

一个肮脏的解决方案是先隐藏元素，然后使用fadeIn：

$(window).load(function() {
    $('.home').attr('style', 'display: none;');//to hide them
    // First attempt
    $('.home').delay(200).fadeIn(400);
    // Second attempt
    $('.home').each(function(){
        $(this).delay(200).fadeIn(400); 
    });
});

Answer 5

试试这个，记得在你的 .home 上有 display:none

 $(window).ready(function() {
     $('.home').delay(200).fadeIn(400);
 });​

Answer 6

在 jsFiddle 上，您不需要window.load，因为它是默认设置。

$('.home').fadeTo(0, 0).delay(1000).fadeTo(400, 1);

演示：http: //jsfiddle.net/elclanrs/FaqBX/9/

Answer 7

试试这个小提琴：

http://jsfiddle.net/FaqBX/7/

您需要先隐藏元素（作为 user1689607），然后我将您的 fiddle 更改为 no wrap（head），因为它已经是 window.load。

Answer 8

在淡入之前隐藏它们并使用准备好的文档而不是 window.load。

$(function() {
    // First attempt
    $('.home').delay(200).fadeIn(400);
});​

http://jsfiddle.net/c7LzQ/

Answer 9

http://jsfiddle.net/FaqBX/13/

在 CSS 中首先隐藏：

.home { display: none; } 

如果您必须使用延迟：

window.setTimeout(function() {
    $('.home').fadeIn(400);
}, 200);

否则：

 $('.home').fadeIn(400);

Answer 10

在显示之前用 CSS 隐藏它。如果它已经可见，则不能淡入它。

HTML：

<div class="home">
    <h1>Home</h1>
</div>
<div class="home">
    <p>This is the home.</p>
</div>

Javascript：

$(function() {
    $('.home').fadeIn(400);
});​

CSS：.home {display:none;}​</p>