Javascript 带有fadeIn和fadeOut的jquery问题

我试图创建一种方法，当用户单击具有特定ID的锚链接时，显示和隐藏div内部的内容（基于类）

我有一个带有锚链接的字母A-Z索引。当有人单击特定链接（字母）时，javascript会隐藏（淡出）列出了特定类的所有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);
    });
});

试一试

代码的较小版本

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

---

试试看

代码的较小版本

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

---

现在发生的是一些奇怪的时间和延迟问题时，点击 在字母之间来回移动

尝试使用stop（）方法（）：

如果没有帮助-尝试用setTimeout替换delay（）

现在发生的是一些奇怪的时间和延迟问题时，点击 在字母之间来回移动

尝试使用stop（）方法（）：

如果没有帮助-尝试用setTimeout替换delay（）

试试这个

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

试试这个

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

---

嗨，如果我答对了你的问题，你想做一个手风琴，这意味着：你只想在同一时间看到一个div。Acutally并不是很难做到，但我总是使用插件，因为我确信我没有错误。试试其中一个嗨，如果我答对了你的问题，你想做一个手风琴，这意味着：你只想在同一时间看到一个div。Acutally并不是很难做到，但我总是使用插件，因为我确信我没有错误。试试其中一个@PSL我也想过这样做，但是这个

指的是
id^=“letter-
和OP-want-class。我想它们是不同的。是的，我后来意识到..快速查看有这样的想法…：）也许你可以缓存
$（'[class*=“letter-”]）
外部，也可以使用它。我非常感谢你Tushar提供了这个解决方案。我有84行代码，你已经浓缩成了7行。纯粹的天才-我非常感谢！：-）@PSL我也想过这样做，但是
这个
指的是
id^=“letter-
和OP-want类。我想它们是不同的。是的，我后来意识到了。。快速看一眼，我有这样的想法……：）也许您可以将
$（'[class*=“letter-“]'）
缓存到外部并使用它。非常感谢您提供此解决方案。我有84行代码，你们已经压缩成7行。纯粹的天才——我非常感激！：-）