jquery - 在 jquery 中使用数组旋转推荐

Question

http://jsfiddle.net/jdTL9/1/

我无法使其正常工作。它在错误的时间更改文本(正如您在演示中看到的那样)。我认为我的处理方式是错误的(主要是 setTimeout 是不必要的)。有人可以看一下吗？

var testimonials = ['This', 'is', 'kind', 'of', 'working']

$.each(testimonials, function (i, val) {
  setTimeout(function () {
   //Slide In
    $('#testimonials blockquote').show("slide", {
      direction: "right"
    }, 1500, function () {
     //Slide Out
      $(this).text(val).hide("slide", {
          direction: "left"
      },
         1500);
    });
  }, i * 3000);
});

**我也希望它永远循环。

Answer 1

您应该在显示项目之前更改文本，可以在 .hide() 的回调中或在 show() 之前。还重构了您的逻辑以使用回调而不是 setTimeout:

var testimonials = ['This', 'is', 'kind', 'of', 'working'],
    i = 0,
    l = testimonials.length,
    $el = $('#testimonials blockquote');
(function loopTestimonials() {
    $el.text(testimonials[i++ % l]).show("slide", {
        direction: "right"
    }, 500, function () {
        $(this).delay(2000) //milliseconds to stay in screen
        .hide("slide", {
            direction: "left"
        }, 500, loopTestimonials); //restart show/hide loop when hide completes
    });
}());

Fiddle