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/