JQuery Rotating Text

Question

I have some text that i need to rotate, this is what i have now:

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

and my jquery is like this:

$(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);

so...xxx show up fine, but then it rades out, i see all of the other 3, yyy,zzz and ooo overlayed on top of each other, it does not do it one by one, please help me figure this out.

Thanks!

Answer 1

Change your jQuery each:

$('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
    }
});