仅显示数组中的最后一项

Question

我有一个 jQuery 代码，如下所示。我想遍历整个阵列 - 显示一条消息 5 秒，然后转到下一条并显示 5 秒，然后继续下一条。问题是它只显示最后一项 - "Four".

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

Note that we multiply the setTimeout time by index, otherwise everything would be executed in the same time period.

工作fiddle：http://jsfiddle.net/urahara/49ka7oph/1/

仅显示数组中的最后一项

Shows only the last item in the array

javascript

arrays

jquery

show-hide