13

記事要素にCSS3トランジション効果を実装していますが、イベントリスナーtransitionendは、jQueryではなく純粋なJavaScriptでのみ機能します。

以下の例を参照してください。

// 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
});

これは、コードが最初にのみ起動することを意味します。したがって、同じ要素で4つの異なる遷移が発生した場合、コールバックは1回だけ発生します。

于 2012-07-04T22:35:59.303 に答える
21

jQueryではbind()、またはon()メソッドを使用する必要があります。

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

this.parentNodejavascriptオブジェクトを返します。.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 に答える