使用setTimeout延迟jQuery动画

我正在处理图像上的某些转换，当用户按下按钮移动到下一个图像时。如果有多幅图像彼此相邻，且图像非常窄，则这些图像将同时进行过渡。所以我检查图像上的宽度，并将精简的图像添加到数组中，然后在数组中的每个对象上运行转换。我想在数组中的每个图像的动画之间创建一个小的延迟，所以我试图在1秒超时后运行我的jQuery.animate。使用setTimeout延迟jQuery动画

下面是我试图让超时没有成功的工作方式：

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     function tempTransition() { 
      set[i].transitionOut($('#gallery'), 562); 
     } 
     setTimeout(tempTransition, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

for (i=0; i < set.length; i++) { 
    if (i != 0) { 
     setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
}

transitionOut（）：

jQuery.fn.transitionOut = function(parent, height) { 
    this.animate({ 
     height: '0', 
     top: height + 'px' 
    }, function() { 
     $(this).remove(); 
    }); 
}

我得到它使用CMS的闭包例子。但是，现在我遇到了一个新问题。转换只发生在第二张图片上。当有三个图像就会去动画图像1，延迟，动画图像2，动画图像3.有2和3

这里是新的代码之间没有延迟：

for (i=0; i < set.length; i++) { 
    (function(i) { 
     if (i != 0) { 

      function tempTransition() { 
       set[i].transitionOut($('#gallery'), 562); 
      } 
      setTimeout(tempTransition, 200); 
     } else { 
      set[i].transitionOut($('#gallery'), 562); 
     } 
    })(i); 
}

来源

2009-11-30 Jonnie

什么是'transitionOut'功能？你能提供这些代码吗？ – 2009-11-30 03:06:36

当然。我已将它添加到我原来的问题中。 – Jonnie 2009-11-30 13:15:12

通过看你的代码，我觉得你有yet another closure problem，也许是最常见的问题，当人们用循环和嵌套函数工作，我已经看到了。

的i变量，您的setTimeout回调函数指，是相同（因为JavaScript有只函数作用域的，而不是块范围），和由时间的那些功能是异步执行的，环路已经对于所有使用setTimeout的情况，已完成，和i变量将包含set.length - 1。

像往常一样，尝试用另一种方式停止捕捉i变量：

for (var i=0; i < set.length; i++) { 
    (function (i) { 
    if (i != 0) { 
     setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); 
    } else { 
     set[i].transitionOut($('#gallery'), 562); 
    } 
    })(i); 
}

来源

2009-11-30 04:10:52 CMS

谢谢。这帮助我克服了第一个障碍。 :) – Jonnie 2009-11-30 18:43:32

使用超时是当涉及到定时动画/效果时，它会欺骗你。

我没有测试你的代码，但通过浏览它，我注意到你正在使用setTimeout没有任何东西来清除它们。

当用户在'延迟'期间触发事件时会发生什么？你必须实施一些措施来管理。

对不起，我现在没有你的答案，也许当我有更多的时间后，或有人出来一个更优雅的解决方案。

来源

2009-11-30 02:49:51

jquery fadeOut http://docs.jquery.com/Effects/fadeOut让你创建一个回调，这是一个你可以在fadeOut完成时运行的函数。所以如果你想要的话，你可以把渐变连在一起，所以当一个完成时它会调用下一个渐变。如果这不是你正在寻找的，我可能会误解你的问题。

另外，在示例3中，我认为您希望像这样编写它，并且没有将函数定义传递给setTimeout，因为这样做不会执行任何操作。

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);

来源

2009-11-30 03:02:37

使用setTimeout延迟jQuery动画

回答

相关问题