具有可变延迟的jQuery推子?

时间:2014-09-06 22:54:30

标签: javascript jquery

我正在使用淡入/淡出jQuery序列(类似于下面)但是老板希望能够为一些行指定不同的显示时间。我没玩多少运气。

function ShowList() {
  var i = 1;
  function showQt() {
    if (i === 1) $('li').hide();
    $('li').eq(i - 1).fadeIn(500, function() {
     $('li').eq(i - 1).delay(1000).fadeOut(500, function() {
        if (++i > 4) i = 1;
        showQt();
     });
    });
  }
  showQt();
}
ShowList();

我需要做的是为各个li元素自定义延迟(1000)。因此每个默认情况下每个显示1秒,但是如果我只想让li#3显示5秒钟,我将如何修改它?

这甚至可能吗?

I've added a simplified jsfiddle here - 包括建议的计时器数组,但这也不起作用。

感谢您的帮助。

方括号,当然。多谢你们。修复几乎工作,但随后被定时器停留,好像我们是一个短(虽然有4行4)。 Added an extra item to beginning of array所以现在有5个计时器用于4行(猜测第一个被忽略了吗?)但是现在我们已经金了。

1 个答案:

答案 0 :(得分:1)

试试这个:

var timers = [1000,1000,1000,5000,1000,8000,1000,1000,1000,1000];
// Sorry about my terrible array notation!

function ShowList() {
  var i = 1;
  function showQt() {
    var d = timers[i-1];
    if (i == 1) $('#textFade li').hide().delay(d);
    $('ul#textFade li').eq(i-1).delay(d).fadeIn(1000, function() {
      $('ul#textFade li').eq(i-1).delay(d).fadeOut(500, function() {
        if (++i > 10) i = 1;
        showQt();
      });
    });
  }
  showQt();
}
ShowList();

JSFiddle