我想淡出一个元素(将其不透明度转换为0),然后在完成后从DOM中删除该元素。
在jQuery中,这很简单,因为您可以指定动画完成后要执行的“删除”操作。但是,如果我希望使用CSS3过渡进行动画处理,是否可以知道过渡/动画何时完成?
对于过渡,您可以使用以下内容通过jQuery检测过渡的结束:
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
对于动画,它非常相似:
$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
请注意,您可以将所有浏览器前缀的事件字符串同时传递到bind()方法中,以在所有支持该事件的浏览器上支持事件触发。
更新:
根据Duck的评论:您使用jQuery的.one()方法来确保处理程序仅触发一次。例如:
.one()
$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... }); $("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });
更新2:
jQuery bind()方法已被弃用,从开始,on()最好使用method方法jQuery 1.7。bind()
bind()
on()
jQuery 1.7
您还可以off()在回调函数上使用method,以确保仅将其触发一次。这是一个等效于using one()方法的示例:
off()
one()
$("#someSelector") .on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e){ // do something here $(this).off(e); });
参考文献:
.off()