jQuery的 - 淡入对象选择的类

我试图一次选择几个元素，并在窗口加载淡入淡出。最明显的jQuery的 - 淡入对象选择的类

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

没有工作，我也没有

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

什么是做到这一点的最好方法是什么？

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

来源

2012-10-04 Michael Gruber

以何种方式 “没有它的工作”？ –

从jsFiddle边栏以及代码中使用DOM就绪方法并不是一个好主意。选择一个或另一个。你在'window.load'和jsFiddle的'onload'选项之间有冲突。你的处理程序分配得太晚了。 –

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

来源

2012-10-04 20:36:02 aquinas

'window'没有'.ready'事件，但它确实有'load'事件。如果你使用'$（window）.ready'，它就会像'$（document）.ready'一样工作。 –

正确。我只是使用与OP相同的代码。 – aquinas

@aquinas我认为他可以使用窗口加载就好，它可能是由于jsfiddle的设置，如果你看看它已经说onLoad的左侧面板不工作。可能使用它两次导致问题。 – TK123

试试这个：

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

来源

2012-10-04 20:34:54 Darkwater

你需要隐藏他们，他们可以在消退之前

来源

2012-10-04 20:35:23

脏的解决方案是第一个隐藏的元素，然后使用淡入：

$(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); 
    }); 
});

来源

2012-10-04 20:36:46 rbernabe

试试这个，记得有显示：在您的。家里

无

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

来源

2012-10-04 20:36:46

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

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

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

来源

2012-10-04 20:37:16 elclanrs

试试这个小提琴：

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

首先，您需要（如user1689607）隐藏的元素，然后我改变你的小提琴无包装（头），因为它已经是window.load。

来源

2012-10-04 20:37:34

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

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

http://jsfiddle.net/c7LzQ/

来源

2012-10-04 20:37:36

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

隐藏首先在CSS：

.home { display: none; }

如果必须使用的延迟：

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

否则：

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

来源

2012-10-04 20:39:44 TK123

在显示它之前用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;}

来源

2012-10-04 20:42:48 bendman

jQuery的 - 淡入对象选择的类

回答

相关问题