javascript - jquery 的淡入和淡出问题

Question

我正在尝试创建一种方法，当用户单击具有特定 ID 的 anchor 链接时，显示和隐藏 div 内的内容(基于类)。

我有一个带有 anchor 链接的 A-Z 字母索引。当有人点击特定链接(字母)时，javascript 会隐藏(淡出)列出了特定类的所有 div。然后脚本显示(淡入)我所在的 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);
    });
});

<小时/> ^ attribute-starts-with-selector

* attribute-contains-selector/