最近、サムネイルのアニメーションでTransitJSを試しています。トランジットjsを使用することは必須ではありません。必要に応じて、divのアニメーション呼び出しを破棄する方法が見つからないため、これは良いことかもしれません。
基本的に私はモバイル用のアニメーションを無効にしようとしています。モバイルにはホバーがないので、これをそのままにしておくのは無意味です。しかし、ドキュメントを調べてみると、プロセスを停止する方法が見つからないようです。
私のコードは次のようになります：
$(".spark_burst").css({ scale: 0 });
$("a.trigger").bind('mouseenter play', function() {
$(this).find(".spark_burst").transition({
opacity: 0.7, scale: 2,
duration: 400,
easing: 'in',
queue:false,
complete: function() { }
});
$(this).find(".targeting").transition({
y: 0,
x: 235,
easing: 'in',
queue:false,
duration: 200
});
}).bind('mouseleave reset', function() {
console.log("hover out");
$(this).find(".spark_burst").transition({
opacity: 0, scale: 0,
duration: 400,
easing: 'out',
queue:false,
complete: function() { }
});
$(this).find(".targeting").transition({
y: 0,
x: 0,
easing: 'snap',
queue:false,
duration: 200
});
});
私は次のようにイベントのバインドを解除しようとしました：
$(window).resize(function(){
if ($("#all_spark").css("marginRight") == "0px" ){
console.log("0 pixels");
$("a.trigger").unbind( "mouseover mouseout play reset" );
}
});
ここでの私の思考プロセスは、モバイルスタイルが親でトリガーされたときに監視するサイズ変更関数を設定し、次にmouseoverとmouseoutトリガーのバインドを解除することでした。しかし、これは暗闇の中でのショットであり、機能しないので、これは私の側の純粋なゴミだと思います。
何か案は？
したがってmouseenter、mouseleaveイベントをトリガーにバインドし、
バインドを解除mouseoverしてmouseoutイベントを実行しますが、機能しません。
...。
ちょっと待って ！！！それらは完全に異なるイベントです！
mouseenterはmouseoverと同じではありません、
そして
mouseleaveはmouseoutと同じではありません、
イベントのバインドを解除するには、同じイベント名を使用する必要があります:)
このデモでは、このトランジットJSでテストされています：http：//jsfiddle.net/JuKqK/
それが役に立てば幸い。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加