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

document.load$(window).readyの代わりに必要です。$(window).loadそして、それらを最初に非表示にする必要があります：http: //jsfiddle.net/f3XhW/

Answer 3

汚い解決策は、最初に要素を非表示にしてから、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 4

これを試してください。.homeにdisplay：noneがあることを忘れないでください

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

Answer 5

window.loadjsFiddleでは、デフォルトであるため、必要ありません。

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

デモ： http： //jsfiddle.net/elclanrs/FaqBX/9/

Answer 6

これを試して：

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

Answer 7

このフィドルを試してください：

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

最初に要素を非表示にする必要があり（user1689607として）、それからフィドルをラップなし（ヘッド）に変更しました。これはすでにwindow.loadであったためです。

Answer 8

フェードインする前にそれらを非表示にし、window.loadの代わりにdocumentreadyを使用します。

$(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>