Question

全部，说我有以下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，但找不到一个关于它是如何工作的好教程。

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

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

任何有关处理此问题的好方法的想法都会非常感激！提前谢谢！

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

Answer 2

在jQuery动画上使用回调函数

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

Answer 3

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

Answer 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

jQuery淡出子div和淡入下一个子div

4 个答案: