jQeury がフェードインおよびフェードアウトするときに注意する必要がある問題_jquery

2 日前、Oak Lodge の友人が公開した記事「JQuery で画像カルーセル効果を実装」を拝見しました。彼は画像のフェードインとフェードアウトを実現するために、fadeIn と fadeOut を使用していることがわかりました。フェードアウト回転。そのとき、連続して複数回クリックするとアニメーションの生成が遅れるのではないかと心配していました。しかし、数回続けてクリックしても明らかな遅延は見られなかったので、それ以上考えませんでした。
ご存知のとおり、jQuery によって生成されたアニメーション効果はデフォルトでキューに入れられます。場合: 1 回クリックすると、3 秒間のアニメーションが生成されます。それから私はすぐに点を3回結びました。すべてのアニメーションが終了するまでに 9 秒かかります。 Animate は、アニメーションをキューに入れるかどうかを簡単に設定できるカスタム アニメーションです。しかし、fadeInやfadeOutを使うのは面倒です。
一部の Flash Web サイトのアイコンを見ると、マウスを置くとすぐにアイコンがゆっくりと変化し、マウスを離すとゆっくりと元に戻ります。とても美しいです。 jQuery を使用して、同様の効果を達成できるかどうかを確認する予定です。練習中だったので、2 つの写真を取り出しました:

コードをコピーします コードは次のとおりです:

< /div>

このようにして、最初の写真が 2 番目の写真を覆い、特殊効果を実現するには最初の写真をフェードインおよびフェードアウトするだけです。そこで、hover、fadeIn、fadeOut を使って

コードをコピー を実装しました。 コードは次のとおりです。

$(document).ready(function () {
$("div").hover(
function () { $("#1").fadeOut(1000); },
function () { $("#1").fadeIn(1000); }
)
});

しかし、すぐに動かないと、この問題が発生します。マウスを止めずに出し入れします。その後、アニメーションはすべてキューに入り、アニメーションは動き続けますが、これは非常に見苦しいものです。

それで私は使用する予定です: dequeue()、定義: キューの先頭からキューに入れられた関数を削除して実行します。
出入りを続けると、前の操作になると思います。キュー内のアニメーションが削除されました。これにより、最終的なアニメーションが実行されます。

コードをコピー コードは次のとおりです。

function () { $("#1 ").dequeue().fadeOut(1000); },
function () { $("#1").dequeue().fadeIn(1000); }

しかし、さらに厄介な状況 マウスを出し入れし続けると、画像が消えたり、元に戻らなかったりすることがありました。どうしたの？

次に、stop() を使用することを考えました。定義:
指定されたすべての要素で現在実行中のアニメーションをすべて停止します。
アニメーションが実行キューに入れられている場合、それらはすぐに開始されます。

コードをコピー コードは次のとおりです。

function () { $("#1 ").stop ().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }

停止します以前のすべてのキュー、ついに機能します!しかし、絵は半分に消えて動かなくなりました！ 2枚の写真を重ね合わせたような感じです。
また何が起こったのですか？
stopでパラメータを追加するまでは、正常に画像が表示されます。
Clearqueue (オプション) boolean
true に設定すると、キューをクリアします。アニメーションはすぐに終了できます。
Gotoend (オプション) boolean
現在実行中のアニメーションを即座に完了させ、表示と非表示の元のスタイルをリセットし、コールバック関数を呼び出します。

コードをコピー コードは次のとおりです。

function () { $("#1 ").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }

しかし、実行完了後に突然画像全体が表示され、フェードイン、フェードアウトなどの効果が無い状況が発生します。
アニメイトを使うしか方法はありません。

コードをコピー コードは次のとおりです:

function () { $("#1").stop().animate({ 'opacity': 0 }, 1000) },
function () { $("#1" ).stop().animate({'opacity':1}, 1000); }
または:
function () { $("#1").animate({ 'opacity': 0 }, { キュー: false、期間: 1000 }); },
function () { $("#1").animate({ 'opacity': 1 }, { キュー: false、期間: 1000 });

このようにして、私たちが望んでいた完璧な効果を実現しました。

要約すると、stop 理論と dequeue 理論を使用することは可能ですが、なぜうまくいかないのでしょうか?よくわかりません。おそらく jQuery ライブラリに問題があると思われます。
問題を見つけるには、元のファイルを確認する必要があります。ただし、今後フェードインとフェードアウトを使用する場合は十分に注意してください。もちろん、オーク ロッジの友人による
《JQuery Implementation of Image Carousel Effect》 は間違いなく良い例です。時間を 2000 年に変更して初めて、遅延に気づきました。
意図的にトラブルを探している私のような人だけがこれを行うでしょう。他の人がこれほど長い間設定できるでしょうか?興味のある友人は、オーク ロッジに行って、それについて学ぶことができます。これは、シンプルで美しく、実用的な例です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。