Jquery见证推子无法顺利运行

我使用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/