jQuery問題與fadeIn和fadeOut

Question

當用戶單擊具有特定ID的錨鏈接時，我試圖創建一種方法來顯示和隱藏div內的內容（基於類）。

我有帶有錨鏈接的字母的AZ索引。 當某人單擊特定的鏈接（字母）時，javascript將隱藏（fadeOut）具有列出的特定類的所有div。 然后，腳本顯示（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);
    });
});

Answer 1

試試.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);
    });
});

---

^屬性從選擇器開始

*屬性包含選擇器/

Answer 2

當在字母之間來回單擊時，發生了一些奇怪的時間安排和延遲問題。

嘗試使用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);
    });

如果沒有幫助，請嘗試使用setTimeout替換delay（）

Answer 3

嘗試這個

$('#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);
    });
});