JQuery Rotating Text

Question

Hi,

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
    }
}); 

Answer 2

The problem is that you're iterating through all the facts at once. How about simply this:

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

As an aside, please don't use the hideous "rotateSlide()" notation for setTimeout. Just pass it the function you want to call, as shown above.