web-dev-qa-db-ja.com

jQueryを使用したCSS3遷移イベントリスナー

記事要素に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);

誰かが私が間違っていることを私に説明できますか？

jqueryeventscsscss-transitionsevent-listener
13
Tudor Ravoiu

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

$(this).parent().bind( 'transitionend', function() {alert("1"); });
20
undefined

また、要素で複数のトランジション（不透明度や幅など）を実行している場合は、複数のtransitionEndコールバックが発生することにも注意してください。

JQueryを使用してイベントをdivの遷移終了にバインドしている場合は、one（）関数の使用を検討することをお勧めします。

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

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

23
graygilmore

_this.parentNode_はjavascriptオブジェクトを返します。プロパティがあります_.addEventListener_ $(this).parent()jQueryオブジェクトを返します。プロパティはありません_.addEventListener_

代わりにこれを試してください、

_$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() {
    alert("1");
})
_
4
Jashwant

最初のものが実際に機能する場合（ベンダープレフィックスが必要なため、疑わしい）、これも機能するはずです。

$(this).parent().on('transitionend', function() {
    alert("1");
});
1
Esailija