fadeInとfadeOutのjquery問題 - javascript、jquery

ユーザーが特定のIDのアンカーリンクをクリックしたときに、（クラスに基づいて）div内のコンテンツを表示および非表示にする方法を作成しようとしています。

アンカーリンク付きの文字のA-Zインデックスがあります。 誰かが特定のリンク（文字）をクリックすると、JavaScriptは特定のクラスがリストされているすべてのdivを非表示（fadeOut）にします。次に、スクリプトは（fadeIn）後のdivを表示します。

問題は、これらのうち13個があり、状況を説明するために以下の最初の3つを共有したことです。

何が起こっているのですか？文字間を前後にクリックすると問題が発生します。タイミングが非常に短く設定されていても、divの表示が持続し、長時間にわたってフェードアウトしないことがあります。

たぶん、いくつかの関数でこれについてより賢明な方法があると確信していますが、その方法はわかりません。

ご不明な点がある場合や、詳細とコンテキストが必要な場合はお知らせください。

$("#letter-a").mousedown(function(){
$(".letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function(){
$(".letter-a").delay(600).fadeIn(500);
});
});

$("#letter-b").mousedown(function(){
$(".letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function(){
$(".letter-b").delay(600).fadeIn(500);
});
});

$("#letter-c").mousedown(function(){
$(".letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function(){
$(".letter-c").delay(600).fadeIn(500);
});
});

回答：

回答№1の場合は3

試す .stop（true、true）

コードの小さいバージョン

var cls_all = $("[class*="letter-"]"); //cached
$("[id^="letter-"]").mousedown(function () {
var cls = this.id;
cls_all.not("." + cls).stop(true, true).fadeOut(100, function () {
$("." + cls).delay(600).stop(true, true).fadeIn(500);
});
});

---

^ attribute-starts-with-selector

* attribute-contains-selector /

---

回答№2の場合は1

何が起こっているのかは、クリックすると奇妙なタイミングと遅延の問題があります 文字の間で前後に。

stop（）メソッドを使用してみてください（http://api.jquery.com/stop/）：

$(".letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").stop().fadeOut(100, function(){
$(".letter-a").delay(600).fadeIn(500);
});

それが役に立たない場合-delay（）をsetTimeoutに置き換えてみてください

---

回答№3の場合は0

これを試して

$("#letter-a").mousedown(function () {
$(".letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function () {
setTimeout(function () {
$(".letter-a").fadeIn(500);, 600);
});
});

$("#letter-b").mousedown(function () {
$(".letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function () {
setTimeout(function () {
$(".letter-b").fadeIn(500);, 600);
});
});

$("#letter-c").mousedown(function () {
$(".letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w").fadeOut(100, function () {
$(".letter-c").fadeIn(500);, 600);
});
});

---