Jquery Testimonial fader does not work smoothly

问题

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

回答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/

回答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.

回答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/

来源：https://stackoverflow.com/questions/20611506/jquery-testimonial-fader-does-not-work-smoothly

标签

jquery

fade

testimonials