jquery中的fadeout和fadeIn回调函数答案

【问题标题】：fadeout and fadeIn callback function in jqueryjquery中的fadeout和fadeIn回调函数
【发布时间】：2012-04-26 05:40:39
【问题描述】：

我有三个 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>

【问题讨论】：

标签： jquery html

【解决方案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/

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

【讨论】：

我的问题是当我的最后一个 div 淡入时我想淡出所有三个 div 但你的代码没有这样做
@amit - 乍一看看起来很复杂，但它是通过多个元素处理相同动画的更好方法。想象一下有 100 个 DIV 可以淡入并使用函数连接。你会生气的。您可以将这个小脚本用于您需要的任意数量的元素。
太好了，我从来没有用过 .when 东西 :)

【解决方案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>

【讨论】：

【解决方案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(); } );

您也可以像我一样淡出主 div duanNt 而不是全部三个。附： .promise() 方法来自 jQuery 1.6

【讨论】：

【解决方案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();

    })

【讨论】：

【解决方案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);
     });
});

【讨论】：

【解决方案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>

【讨论】：

就像我说的，这只是一个如何使用回调函数的例子。
jsfiddle.net/LJfVd 你需要调整淡入淡出的顺序..

【解决方案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

【讨论】：