JQUERY Random Multiple quotes rotator need tweaking

Question

I'm struggling trying to make my multiple quote rotator working.

I have a JS fiddle up and running Jsfiddle - Multiple Quote Rotator

jQuery(function(){
var quotes1 = [
[ '75', 'Happy Clients' ],
[ '25', 'Emails Typed a day' ],
];

var quotes2 = [
[ '14', 'Coffes a day' ],
[ '1', 'Squeacky Chair' ],
];
var quotes3 = [
[ '70', 'Phone Calls / Day' ],
[ '5', 'Spiders' ],
];
var quotes4 = [
[ '1000', 'Types on the keyboard' ],
[ '100%', 'Qualified Personel' ],
];
var quotes5 = [
[ '55', 'Planes' ],
[ '500', 'Girls' ],
];
var quotes6 = [
[ '160', 'Seo Campaigns running' ],
[ '1', 'Squeacky Chair' ],
];

$('.circle.one').loadText( quotes1, 200); 
$('.circle.two').loadText( quotes2, 400 ); 
$('.circle.three').loadText( quotes3, 600 ); 
$('.circle.four').loadText( quotes4, 800 ); 
$('.circle.five').loadText( quotes5, 1000 ); 
$('.circle.six').loadText( quotes6, 1200 );
});

$.fn.loadText = function( quotes, interval ) {
return this.each( function() {
    var obj = $(this);
    var quote = random_array( quotes );
    var delaytest = delaytest;
    var quote_text = '<p class="facts_h1">' + quote[[0],[0]] + '</p>' + '<p   class="facts_p">' + quote[[0],[1]] + '</p>';

    obj.parent().fadeOut( 'linear', function() { 
            obj.empty().html(quote_text );  
            obj.parent().fadeIn(500);
    });

    $("#quote-reload").click( function(){ 
            if( !obj.is(':animated') ) { 
                obj.loadText( quotes, interval );
           } 
    });
});
 }
 function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
 }

My problem is that I would like my 6 quotes to appear one after the other with an animation.

All I can manage is a global fade in fade out...

Am I making sense?

Answer 1

All I can manage is a global fade in fade out...

That's because you're applying the fadeIn and fadeOut to the parent() container of all the the .circle elements. Apply the fade animations to the objects themselves. See the following fiddle for more details:

http://jsfiddle.net/6DFfr/

Additionally:

1. Use delay() to stagger animations.
2. Use fadeTo() instead of fadeIn/fadeOut - fadeTo() animates the opacity only, while fadeIn/fadeOut will also hide the elements, resulting in element position jitter.

Answer 2

Rather than having a function applied to each of them, have one function that works on a list of elements.

Check out this question for a demonstration on how to do that.