Question

我经常看到像这样的问题，并且有多种解决方案。我试图想出一些可以重复使用的短片。我的问题是，鉴于以下代码，我是否需要clearTimeout()以及在何处执行此操作？还有，你会改进什么？这段代码的性能有多好或多坏？
http://jsfiddle.net/elclanrs/fQX8M/15/

var fade1by1 = function ($elms, props) {

    props = props || {};
    props.delay = props.delay || 1; // s
    props.speed = props.speed || 400; // ms
    props.ease = props.ease || 'linear';

    for (var i=0, d=0, l=$elms.length; i<l; i++, d+=props.delay*1000) {
        (function (i, d) {
            // Using `delay()` instead of `setTimeout()`
            // as Alexander suggested
            $elms.eq(i).delay(d).fadeIn(props.speed, props.ease);
        })(i, d);
    }
};

Answer 1

我认为您不需要window.clearTimeout，因为您似乎不想停止动画。如果你仍然未定，那么使用.delay会怎么样，它显然也会使用window.setTimeout。

var fade1by1 = function ($elms, speed) {
    speed = speed || 1; // Seconds
    for (var i=0, s=0, l=$elms.length; i<l; i++, s+=speed*1000) {
        $elms.eq(i).delay(s).fadeIn('slow');
    }
};

在行动here中查看。

Answer 2

对我来说，你应该使用fadeIn函数的回调来做到这一点。像下面这样的东西应该实现你的所有目标（在新的参数中替换）：

var customFade = function(parent, speed){
    $(':hidden:first', parent).fadeIn(speed, function(){
        customFade(parent, speed)
    });
}
$('button').click(function(){ customFade($('ul'), 1000); });

Answer 3

另一种方法是将show行为直接绑定到每个所选元素作为自定义事件，而不是一次性设置所有操作，并在该绑定函数中包含固定等待时间加上对触发器的调用“next”元素的自定义事件（如果存在）。要开始它，你只需点亮第一个元素的保险丝。

所以，像这样：

var fadeCascade = function fadeCascade(your_selector, props) {
  props = props || {};
  props.delay = props.delay || 1; // s
  props.speed = props.speed || 2000; // ms
  props.ease = props.ease || 'linear';

  $(your_selector)
    .addClass('showme') // Being a little lazy here, but it works
                        // You could work out an inspection by attached event
    .bind('showme', function() { // custom event 
      $(this)
        .delay( props.delay * 1000 )
        .fadeIn(props.speed, props.ease, function() {
          $(this).nextAll('.showme:first').trigger('showme'); // jqueryish recursion
      });
    }).hide() // or just hide in initial css
  .first().trigger('showme'); // set the dominoes falling
};

并触发揭示：

fadeCascade('div.bar');

如果您担心自己的卫生问题，可以在去的时候取消绑定事件并删除课程。

示例：http://jsfiddle.net/redler/EKx6s/1/

更新：添加延迟，感谢@Alexander。

一个接一个地显示元素

3 个答案: