jQuery исчезает дочерний div и исчезает в следующем дочернем div

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, затемнить текст в div из item2, а затем исчезнуть item2 и исчезнуть. в п.3. После того, как это будет сделано, я хотел бы вернуться и исчезнуть item3 и вернуться обратно в item1 на основе setTimeout.

Я искал .childen.next.fadein, но не смог найти хороший учебник о том, как это работает.

В конце концов я хотел бы также добавить кнопки, по которым я могу нажимать, и если вы нажмете на 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

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

Answer 3

Я возился с чем-то другим и забыл опубликовать свой ответ, но в любом случае вот пример, который я сделал, если он вам пригодится: http://jsfiddle.net/3pTzh/4/

Answer 4

Использование функций обратного вызова в анимации jQuery

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