Question

我有一个jQuery代码，如下所示。我想通过整个数组 - 显示一条消息5秒然后转到下一个并显示它5秒，然后显示到下一个。问题是它只显示最后一项 - “四”。

  <script>
    $(function(){
      var myTab = ['One', 'Two', 'Three', 'Four']
      $(myTab).each(function(i, elem){
          $('#showHere').text(elem).fadeIn('slow').delay(5000).fadeOut('slow');
      })
    });
  </script>

Answer 1

这是因为你的循环在第一个动画完成之前很久就会结束，.text()不会等待动画。

要解决此问题，请删除.each()，并使用手动递增计数器的.fadeOut()回调。

$(function(){
  var i = 0; // maintain a counter
  var myTab = ['One', 'Two', 'Three', 'Four'];

  // Create a `cycle` function (invoked immediately, see below)
  (function cycle() {
      // Only try the display if `i` is in the Array range
      if (i < myTab.length) {
          $('#showHere').text(myTab[i])
                        .fadeIn('slow')
                        .delay(5000)
                        .fadeOut('slow', cycle); // Pass `cycle` as a callback
          i++;
      }
  })(); // Invoke `cycle` immediately
});

Answer 2

首先，为了提高性能，你必须抓住多次调用div元素的句柄：

var showHere =  $('#showHere');

然后你想使用setTimeout函数：

 var myTab = ['One', 'Two', 'Three', 'Four']
 var showHere =  $('#showHere');
 $(myTab).each(function (i, elem) {
     setTimeout( function(){
             showHere.text(elem).fadeIn('slow').fadeOut('slow');
     }, i*2000);
 });

请注意，我们将setTimeout时间乘以索引，否则所有内容都会在同一时间段内执行。

工作小提琴：http://jsfiddle.net/urahara/49ka7oph/1/

仅显示数组中的最后一项

2 个答案: