This problem kept eating at me, and I realized that the real problem is here is that you want a way to shuffle the testimonials. If you had a way to do that, then your original function would even work as intended. As it turns out, shuffling a list of jQuery elements is not as easy as you might think. I started by implementing a function that allows you to swap two arbitrary jQuery elements (this avoids using jQuery.clone
, which has side-effects, like removing event listeners):
function swap($a, $b){
var $aNext = $a.next(),
$aParent = $a.parent();
$a.insertAfter($b);
if($aNext.length) $b.insertBefore($aNext);
else $aParent.append($b);
}
Then you can implement a Fisher-Yates shuffle:
function shuffle($items){
var i, j;
for(i=$items.length-1; i>1; i--){
j = Math.floor(Math.random() * (i+1));
swap($items.eq(i), $items.eq(j));
}
}
Now you can simply shuffle all of your testimonials:
shuffle($('.testimonials .item'));
Then use your original code:
$('.testimonials div:first').show();
setInterval(function(){
$('.testimonials div:first-child')
.fadeOut(1000)
.next('div')
.delay(1000)
.fadeIn(1000)
.end()
.appendTo('.testimonials')
},3000);
Of course, once you've gone through all the testimonials, you may want to re-shuffle them to it doesn't keep repeating the same order over and over again.
Demo: http://jsfiddle.net/JWGbz/7/