JQuery Вращающийся текст

Question

У меня есть текст, который мне нужно повернуть, вот что у меня сейчас:

> <div id="facts">
>         <blockquote class="fact visible">
>            xxx  
>         </blockquote>
>         <blockquote class="fact">
>            yyy
>         </blockquote>
>          <blockquote class="fact">
>             zzz
>         </blockquote>
>         <blockquote class="fact">
>            ooo
>         </blockquote>
>     </div>

и мой jquery выглядит так:

$(document).ready(function() {  

$("div#facts").height(factMaxHeight);

    setTimeout("rotateSlide()",7000);      
});   
.............

$('blockquote.fact').each(function () {
        if($(this).hasClass('visible')) {
            $(this).fadeOut(5000,function () { 
                $(this).removeClass('visible');
                $(this).next().setVis
            });
        }//if
        else {
            $(this).fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        }
    }); 
    setTimeout("rotateSlide()",7000);

, так что ... хххпокажется нормально, но потом все закончится, я вижу, что все остальные 3, yyy, zzz и ooo накладываются друг на друга, это не делает это один за другим, пожалуйста, помогите мне разобраться.

Спасибо!

Answer 1

Проблема в том, что вы просматриваете все факты одновременно.Как насчет этого:

$('blockquote.fact.visible').each(function() {
    $(this).fadeOut(5000, function() {
        $(this).removeClass('visible');

        var next = $(this).next();
        if (next.length == 0)
            next = $('blockquote.fact:first'); // If we're at the end of the list, go back to the first one.

        next.addClass('visible').fadeIn(5000);
    });
});
setTimeout(rotateSlide, 7000);

В качестве отступления, , пожалуйста, не используйте отвратительную нотацию rotateSlide () для setTimeout.Просто передайте ему функцию, которую вы хотите вызвать, как показано выше.

Answer 2

Измените свой jQuery каждый:

$('blockquote.fact').each(function () {
    if($(this).hasClass('visible')) {
        $(this).fadeOut(5000,function () { 
            $(this).removeClass('visible');
            $(this).next().setVis
        });
        if($(this).next().size()) {
            $(this).next().fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        } else {
            $(this).parent().children().first().fadeIn(5000,function () {
                $(this).addClass('visible');
            });
        }
        return false
    }
});