Jquery Testimonial 推子不能顺利工作答案

【问题标题】：Jquery Testimonial fader does not work smoothlyJquery Testimonial 推子不能顺利工作
【发布时间】：2015-06-24 05:32:58
【问题描述】：

我使用 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);
});

【问题讨论】：

标签： jquery fade testimonials

【解决方案1】：

添加以下 CSS：

.testimonials {
    position: relative;
}

.testimonials .a {
    position: absolute;
}

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案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/

【讨论】：