1

最初、2 番目、3 番目の値を持つ 3 つの div があります。最初にそれらをフェードアウトし、遅延関数でフェードインします。最後の div がフェードインしたときに、3 つすべての div がフェードアウトするようにします。しかし、私のコードはうまく機能しません

<script type="text/javascript">

$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);

    })


</script>





<div class="duanNt">
<div class="fileianN">first</div>
<div class="fileianLY">second</div>
<div class="fiuleHg">third</div>


</div>
4

7 に答える 7

3

jsBin デモ

$.when(
  
    $('.duanNt').children().each(function(idx,el) {
        $(el).delay(idx*600).fadeTo(700,1);
    })
  
).done(function() {
    $('.duanNt').fadeTo(300,0);
});

http://api.jquery.com/jQuery.when/
http://api.jquery.com/deferred.done/

PSを非表示にしたくない.duanNtが、使用するよりも子だけである場合：$('.duanNt > div').fadeTo(300,0);

于 2012-04-26T05:52:50.387 に答える
1 
$.fn.delay = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};


$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
                $('.duanNt').delay(5000).fadeOut();

    })
于 2012-04-26T06:04:24.540 に答える
1

基本的に、次のコードを使用できます。

<script type="text/javascript">

$(function(){

    $('.fileianN').fadeOut().delay(1000).fadeIn(1000);
        $('.fileianLY').fadeOut().delay(2000).fadeIn(1000);
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
                $('.duanNt').delay(5000).fadeOut();

    })


</script>





<div class="duanNt">
<div class="fileianN">first</div>
<div class="fileianLY">second</div>
<div class="fiuleHg">third</div>


</div>
于 2012-04-26T05:53:46.730 に答える
1

promise メソッドを使用して、アニメーションが完了したことを確認することもできます。

$('.fileianN').fadeOut().delay(1000).fadeIn(1000);
$('.fileianN').promise().done ( function () { $('.fileianLY').fadeOut().delay(2000).fadeIn(1000) ; } );
$('.fileianLY').promise().done ( function () { $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000); } );

あなたが言ったように、最後の div がフェードインしたときにすべての div をフェードアウトさせたいとします。そう、 

$('.fiuleHg').promise().done ( function () { $ ('.fileianN, .fileianLY, .fiuleHg' ).fadOut(); } );

duanNt私が行ったように、3 つすべてではなくメイン div をフェードアウトすることもできます。PS.promise()メソッドは jQuery 1.6 で導入されました

于 2012-04-26T05:57:54.213 に答える
1

すでにコールバック関数があります。次のように使用できます

$("element").fadeOut(1000, function() {
   //..callback
});

あなたの使い方はこれに似ているかもしれません

$('.fileianN').fadeOut().delay(1000).fadeIn(1000, function() {   
     $('.fileianLY').fadeOut().delay(2000).fadeIn(1000, function() {
            $('.fiuleHg').fadeOut().delay(3000).fadeIn(1000);
     });
});
于 2012-04-26T06:05:02.420 に答える
0 
function fadeElements()
{
    var divs=$('.duanNt')​.​children();
    var i = 0;
    next();
    function next() {
        divs.eq(i++).fadeIn('1000');
        setTimeout(next, 500);
        if(i===divs.length) divs.delay(1000).fadeOut();
    };

}

fadeElements();

デモ

于 2012-04-26T06:10:27.727 に答える
0

oncomplete コールバック関数を使用できます。

ほんの一例：

<script type="text/javascript"> 
$(function(){ 
    $('.fileianN').fadeOut().delay(1000).fadeIn(1000, function() {
        $('.fileianLY').fadeOut().delay(1000).fadeIn(1000, function() {
            $('.fiuleHg').fadeOut().delay(1000).fadeIn(1000); 
        }); 
    }); 
}) 
</script>
于 2012-04-26T05:45:46.203 に答える