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），然后我把你的小提琴改成没有换行（head），因为它已经是window.load。

Answer 8

在淡入之前隐藏它们并使用document ready而不是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;}

jQuery - 淡入由类选择的对象

10 个答案: