如何在以前(未知)动画/效果完成后在jQuery中运行代码?

我希望在之前的效果/动作完成后隐藏DIV元素。如果我知道序列,我可以将代码添加到我给 .animate()(例如)的回调函数。但是在这种情况下,我无法访问该状态(它可能会或可能不会通过动画/效果)。因此,两个动画/效果由两个不同的事件触发(例如按钮点击)。

所以我会在DIV元素完成当前动画/效果后运行fadeOut。这有可能与jQuery?

谢谢。

编辑:所以目标是将当前动作(例如fadeOut())与前一动画代码分离。

编辑2:使问题更清楚。

0
为什么你没有访问序列?是什么让你说它的jQuery而不是说,一个CSS3动画?
额外 作者 Joey,
@JoeyVanOmmen我知道它是jQuery,因为我写了它:)。事情是先前的动画是从不同的事件触发而不是下一个动画(例如两个单独的按钮点击)。
额外 作者 Lycha,

5 答案

只需调用 .fadeOut(),它就会自动添加到fx队列的末尾:

http://jsfiddle.net/gilly3/f4vNH/

2
额外
谢谢,我不知道jQuery可以做到这一点,这解决了它。我应该阅读有关fx队列的更多信息。
额外 作者 Lycha,
另外我可以给.fadeOut()一个回调来在fadeOut之后运行额外的代码。
额外 作者 Lycha,

如何使用live()创建自定义事件并绑定到它?

<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
  $('#div').hide();

});
$("button").click(function() {
  $("p").trigger("myCustomEvent");
});
</script>
0
额外

您必须向我们展示以前的动画代码才能获得具体建议。在jQuery中,动画效果可以链接在一起,jQuery会自动将它们一个接一个地排队。或者,您可以使用一个操作的完成功能来触发下一个操作的开始。

例子:

$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000).delay(1000).fadeOut(500);

.animate()方法还有一个完成函数,您可以使用它在动画完成时触发任何操作,但如果下一个操作是动画本身,则更容易使用自动链接以上而不是完成功能:

$("#item").animate({
    opacity: 0.75,
    left: '+=250',
 }, 5000, function() {alert("Animation finished."});
0
额外

我想你正在寻找动画调用中的完整函数参数:

http://api.jquery.com/animate/

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   //Animation complete.
  });
});
0
额外

这很简单,只需排队你的动画

$("#myDiv").queue(function(){
    $(this).fadeOut();
});

它将在动画队列完成后执行。 所以你可以在动画队列之后和你的fadeOut之前添加代码并做任何事......

0
额外