使用jQuery的CSS3转换事件监听器
我正在对article元素实现CSS3过渡效果,但事件监听器transitionend仅适用于纯JavaScript,而不适用于jQuery。
见下面的例子:
// this works this.parentNode.addEventListener( 'transitionend', function() {alert("1"); }, true); // this does not work $(this).parent().addEventListener( 'transitionend', function() {alert("1"); }, true);
有人可以解释一下我做错了什么吗?
在jQuery中你应该使用bind()
或on()
方法:
$(this).parent().bind( 'transitionend', function() {alert("1"); });
另请注意,如果您在元素上运行多个过渡(例如,不透明度和宽度),您将获得多个transitionEnd回调。
如果您使用jQuery将事件绑定到div的转换端,您可能需要考虑使用one()函数。
$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() { // your code when the transition has finished });
这意味着代码只会在第一次触发。 所以,如果你在同一个元素上发生了四次不同的转换,那么你的回调只会触发一次。
this.parentNode
返回一个javascript对象。 它有一个属性$(this).parent()
返回一个jQuery对象。 它没有属性.addEventListener
试试这个,
$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() { alert("1"); })
如果第一个确实有效(我怀疑它,因为它应该需要供应商前缀),那么这也应该工作:
$(this).parent().on('transitionend', function() { alert("1"); });