Question

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

$(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

使用回调函数：

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

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

请注意，您还可以缓存对象并根据其索引显示/隐藏元素。这可以更有效（，如果它重要），而不是查询DOM并创建许多jQuery对象，这在这里是不必要的。类似于this。

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/

Jquery见证推子不能顺利运行

3 个答案: