Jquery Testimonial fader does not work smoothly

Question

I use jquery to rotate my div one by one using fade effect but the effect is not smooth it jumps up and down and then display here is my fiddle.

http://jsfiddle.net/xXRwA/

$(document).ready(function(e) {

  $('.testimonials div:first').show();


    setInterval(function(){ $('.testimonials div:first-child').fadeOut().next('div').fadeIn().end().appendTo('.testimonials') },3000);
});

Answer 1

Add the following CSS:

.testimonials {
    position: relative;
}

.testimonials .a {
    position: absolute;
}

This will put all the .a's on top of one and other

DEMO: http://jsfiddle.net/xXRwA/1/

Answer 2

Use the callback function:

setInterval(function(){ 
   $('.testimonials div:first-child').fadeOut(function() {
        $(this).next('div').fadeIn().end().appendTo('.testimonials');
   }); 
},3000);

http://jsfiddle.net/xXRwA/3/

Note that you can also cache the object and show/hide the elements based on their indexes. This can be more efficient(if it matters) than querying the DOM and creating many jQuery objects which is not necessary here. Something like this.

Answer 3

Just use an interval to show and hide methods:

 $('.testimonials div:first').show();

setInterval(function(){ $('.testimonials div:first-child').fadeOut(1000).next('div').fadeIn(1000).end().appendTo('.testimonials') },3000); 

Or better, if you don't want to view the jump:

 $('.testimonials div:first').show();

setInterval(function(){ $('.testimonials div:first-child').fadeOut(1000).next('div').delay(1000).fadeIn(1000).end().appendTo('.testimonials') },3000);

JSFIDDLE: http://jsfiddle.net/xXRwA/4/