Jquery Testimonial fader does not work smoothly

后端 未结 3 1163
心在旅途
心在旅途 2021-01-27 02:58

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/xXRw

相关标签:
3条回答
  • 2021-01-27 03:21

    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.

    0 讨论(0)
  • 2021-01-27 03:32

    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/

    0 讨论(0)
  • 2021-01-27 03:46

    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/

    0 讨论(0)
提交回复
热议问题