0

我有这段代码，一次淡入和淡出一个 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);
)};

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

4

2 回答 2

2

一种有点不同的方法：

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

于 2012-11-14T09:33:18.087 回答
0

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

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

setInterval(function() {
    $('.testimonials .quote').fadeToggle().end().appendTo('.testimonials');
 }, 5000);
于 2012-11-14T09:20:31.300 回答