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);

jQuery连续旋转器一次多个元素

2 个答案: