jQuery 一次连续旋转多个元素

Question

我有这段代码，它可以很好地一次淡入和淡出一个 div。我需要一次淡出两个 div，并用接下来的两个替换它们。

$(function() {
    // Set first div to show
    $('.testimonials div:first').show();

    // Begin the loop, fade out, find next div, fade that div in, end the process and append back to main div.
    setInterval(function() {
        $('.testimonials div:first-child').fadeOut().next('div').fadeIn().end().appendTo('.testimonials');
    }, 5000);
)};

我尝试改进脚本：

淡入淡出工作 - 它会淡出前两个，然后淡出接下来的两个。但它永远不会循环！

$(function() {
    // Set first div to show
    $('.testimonials .quote:lt(2)').show();

    // Begin the loop, fade out, find next div, fade that div in, end the process and append back to main div.
    setInterval(function() {
        $('.testimonials .quote').slice(0,2).fadeOut().nextAll('.quote').slice(3,4).(.fadeIn().end().appendTo('.testimonials');
    }, 5000);
)};

淡入淡出工作 - 它会淡出前两个，然后淡出接下来的两个。但它永远不会循环！

Answer 1

有点不同的方法：

$(function () {
  (function anim(num, delay) {
    $('.testimonials .quote').slice(0, num).fadeIn().delay(delay).fadeOut().promise().done(function () {
      $('.testimonials').append(this);
      anim(num, delay);
    });
  }(2, 2000)); // change these values to fade another number of elements, or
               // have a longer delay between the fades
});

演示：http://jsbin.com/ivuyex/5/

Answer 2

使用 setInterval，您总是将前两个淡出，第三个和第四个淡入淡出。它确实循环，但在第一次迭代之后，就没有什么可以改变了。

您可以在初始设置状态后尝试 fadeToggle()：

setInterval(function() {
    $('.testimonials .quote').fadeToggle().end().appendTo('.testimonials');
 }, 5000);