Question

我有三个div有价值第一，第二和第三我想先淡出他们和他们fadein有延迟功能现在我想要当我的最后一个div fadein然后我的所有三个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>

Answer 1

jsBin demo

$.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/

如果您不想隐藏.duanNt它自己，只有它的子项而不是隐藏使用：$('.duanNt > div').fadeTo(300,0);

Answer 2

基本上你可以使用以下代码;

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

Answer 3

您还可以使用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在最后一个消失时淡出。所以，

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

你也可以像我一样淡出主要的duanNt而不是所有三个。附： jQuery 1.6中提供了.promise()方法

Answer 4

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

    })

Answer 5

已有 回调函数 。您可以使用

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

Answer 6

您可以使用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>

Answer 7

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

DEMO

jade中的fadeout和fadeIn回调函数

7 个答案:

jsBin demo