jquery - Jquery Testimonial 推子工作不顺畅

Question

我使用 jquery 使用淡入淡出效果一一旋转我的 div，但效果不平滑它会上下跳跃然后显示在这里是我的小提琴。

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

添加以下 CSS：

.testimonials {
    position: relative;
}

.testimonials .a {
    position: absolute;
}

这会将所有的.a' 放在一个和另一个之上

演示：http: //jsfiddle.net/xXRwA/1/

Answer 2

使用回调函数：

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

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

请注意，您还可以缓存对象并根据其索引显示/隐藏元素。这比查询 DOM 和创建许多这里不需要的 jQuery 对象更有效（如果重要的话）。像这样的东西。

Answer 3

只需使用间隔来显示和隐藏方法：

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

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

或者更好的是，如果您不想查看跳转：

 $('.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/