jQuery淡出子div并淡入下一个子div答案

【问题标题】：jQuery fadeout child div and fade in the next child divjQuery淡出子div并淡入下一个子div
【发布时间】：2011-11-16 00:16:33
【问题描述】：

所有，假设我有以下 div：

<div id="rotate_container">
    <div class="reviews" id="item1">This is item one</div>
    <div class="reviews" id="item2">This is item two</div>
    <div class="reviews" id="item3">This is item three</div>
</div>

现在我要做的是当 DOM 完成加载时，我试图淡出 div 中的文本，其中 item1 淡入 item2 的 div 中的文本，然后淡出 item2 并淡出在第 3 项中。完成后，我想返回淡出 item3，然后根据 setTimeout 淡入 item1。

我正在查找 .childen.next.fadein，但找不到有关其工作原理的好教程。

最后我还想添加我可以点击的按钮，如果你在 item2 上并且你点击了上一个，它会淡出 item2 然后淡入 item1 然后在 setTimeout 之后它会淡出 item1 然后淡出回到第 2 项。

基本上，我想要的想法可以在这里找到（就在页脚和旋转 cmets 的正上方）： http://themes.winterbits.com/?theme=daydream

任何关于解决此问题的好方法的想法将不胜感激！提前致谢！

【问题讨论】：

标签： jquery parent fadein fadeout children

【解决方案1】：

应该这样做（更新为重复）：

(function fadeItems(elem){   

    elem.fadeIn('slow',function(){      
       $(this).fadeOut('slow', function(){   
           if($(this).next().length > 0){
             fadeItems($(this).next());   
           }
           else{
               setTimeout(fadeItems, 3000, $("div.reviews:first"));
           }
       });
    });
})( $("div.reviews:first") );

小提琴 - http://jsfiddle.net/rwN7U/2/

【讨论】：

这看起来不错！只是一个额外的问题。如果我确实想添加上一个和下一个链接，我将如何使用您拥有的功能来实现它？

【解决方案2】：

我在摆弄别的东西，忘了发布我的答案，但无论如何，这是我做的例子，如果对你有用的话：http://jsfiddle.net/3pTzh/4/

【讨论】：

【解决方案3】：

在你的 jQuery 动画中使用回调函数

$('#item1').fadeout(200,function(){
    // This is the callback which 
    // runs after this animation completes.
    runAnotherAnimation();
});

【讨论】：

【解决方案4】：

function didleeslide(item) {
    $('#item'+item).slideDown(1000);
    item = (item > 2) ? 1 : ++item;
    $('#item'+item).slideUp(1000);
    item = (item > 2) ? 1 : ++item;
    $('#item'+item).slideDown(1000);
    setTimeout("didleeslide("+item+")",1000);
}

function didleefade(item) {
    $('#item'+item).fadeIn(1000);
    item = (item > 12) ? 11 : ++item;
    $('#item'+item).fadeOut(1000);
    item = (item > 12) ? 11 : ++item;
    $('#item'+item).fadeIn(1000);
    setTimeout("didleefade("+item+")",1000);
}

$(document).ready( function () {
    didleeslide(3);
    didleefade(13);
});

PS: Slide, for me, looks more elegant since there
    would have too much shuffling. On the other hand, fadein/fadeout 
    might be the original idea.

看这里：

http://zequinha-bsb.int-domains.com/fadein-fadeout.html

【讨论】：