13

我在文章元素上实现 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);

有人可以解释一下我做错了什么吗?

4

4 回答 4

23

另请注意,如果您在一个元素上运行多个转换(例如不透明度和宽度),您将获得多个 transitionEnd 回调。

如果您使用 jQuery 将事件绑定到 div 的转换结束,您可能需要考虑使用 one() 函数。

$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    // your code when the transition has finished
});

这意味着代码只会在第一次触发。所以,如果你在同一个元素上发生了四种不同的转换,你的回调只会触发一次。

于 2012-07-04T22:35:59.303 回答
21

在 jQuery 中你应该使用bind()oron()方法:

$(this).parent().bind( 'transitionend', function() {alert("1"); });
于 2012-07-01T17:32:36.757 回答
4

this.parentNode返回一个 javascript 对象。它有一个属性.addEventListener $(this).parent()返回一个 jQuery 对象。它没有属性.addEventListener

试试这个,

$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
    alert("1");
})
于 2012-07-01T18:05:28.657 回答
1

如果第一个确实有效(我对此表示怀疑,因为它应该需要供应商前缀),那么这也应该有效:

$(this).parent().on('transitionend', function() {
    alert("1");
});
于 2012-07-01T17:32:41.343 回答