fadeIn、fadeOut、およびfadeToメソッドのJQuery機能

したがって、fadeInメソッドとfadeOutメソッドの何が問題なのかを考えてみましょう。これらは、ドキュメンテーションによれば、fadeToメソッドに類似していますが、独自の特性を持っています。 一見したところ、何もありません、すべてがドキュメントに書かれています。 ただし、これは常に当てはまるわけではなく、すべての機能がドキュメントに記載されているわけではありません。

それはすべて最も単純なアニメーションから始まりました。


写真は別の写真に置き換えられますが、別の写真を単に非表示および表示できるように構成されています。 アニメーションは、単独でもホバーでも動作するはずです。
頭に浮かんだ最初のもの:
target1.fadeIn(duration); //    target2.fadeOut(duration); //    

それはとても簡単です。
しかし、マウスをすばやく前後に動かすと、アニメーションキューが蓄積され、ポインターが停止した後、しばらくの間「フラッシュ」画像が観察されます。 混乱。 正解。
 target1.stop().fadeIn(duration); //    target2.stop().fadeOut(duration); //    

やってみます。 うまくいく! いいね...

しかし、ここにはありませんでした...


ポインターを非常にすばやく前後に移動すると、stop()メソッドを呼び出した後 、期待どおりにアニメーションが停止する瞬間を「キャッチ」できますが、 次のアニメーションは機能しません
このエラーのオンラインチェックのコード(ターゲットの初期値は不透明度= 0):
 target.fadeOut().stop().fadeIn() 

その結果、画像は、fadeInの後でなければならないため、絶対的な非透明性ではなく半透明のままでした。
ところで、fadeOutは期待どおりに機能するか、ほとんど完全に理解していませんでした。 (プレイする代わりに、次のレジャーを明るくするものがあります。)

私は理解し始めました。 古代のバグを見つけました: トラッカーへのリンク
このエラーを再現する方法の簡単で簡単な例を次に示します。

ほぼ1年半後、開発者はこれがバグではなく機能であると判断し、トピックを閉じました。 気になる人には、パッチをカットしてください。

解決策


解決策は簡単です-そのような状況ではfadeInを使用しないでください。fadeOutを使用できます。また、fadeToを使用します。
 target1.stop().fadeTo(duration, 1); //  fadeIn    target2.stop().fadeTo(duration, 0); //  fadeOut    


これは秩序ではなく、少なくともロシア語でそれを書くことは害にならないと思いました。
ドキュメントにこの「機能」の説明が含まれることはほとんどありません。 パッチを作成する方が速いので、誰かが私より先に進まなければ、暇なときにそれを行います。

さらに、stop()を使用する前にこのバグを「キャッチ」し、fadeInでキューパラメーターをfalseに渡して同時アニメーションを開始します。 結果は同様です-アニメーションは、不透明度のゼロに近い値で「ハング」します。

Source: https://habr.com/ru/post/J181179/


All Articles