jquery - jquery中的fadeout和fadeIn回调函数

Question

我有三个 div 第一个，第二个和第三个值我想先淡出它们，然后用延迟功能淡入现在我希望当我的最后一个 div 淡入时，我的所有三个 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 演示

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

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像我一样淡出主 div 而不是全部三个。PS.promise()方法来自 jQuery 1.6

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

演示