Jquery推薦推子不能正常工作

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的一個頂部和其他

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

Answer 2

只需使用的間隔來顯示和隱藏方法：

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

Answer 3

使用回調函數：

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

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

請注意，您還可以緩存對象並根據其索引顯示/隱藏元素。這比查詢DOM並創建許多不必要的jQuery對象更有效（，如果它很重要）。像this。