fadeIn 和 fadeOut 的 jquery 问题

Posted 2023-05-09

【中文标题】fadeIn 和 fadeOut 的 jquery 问题

【英文标题】：jquery issue with fadeIn and fadeOut

【发布时间】：2013-11-28 07:26:48

【问题描述】：

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

我有一个带有锚链接的字母 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);
    );
);

【问题讨论】：

嗨，如果我的问题没看错，你想制作一个手风琴，这意味着：你只想同时显示一个 div。实际上并不是很难做到，但我总是使用插件，因为我确定我没有错误。试试其中一个1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials

【参考方案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/

【讨论】：

@PSL 我也想做同样的事情，但this 指的是id^="letter- 而OP 想要上课。我想它们是不同的。

是的，我后来意识到了.. 快速看看有这个想法... :) 或许你可以在外面缓存 $('[class*="letter-"]') 并使用它。

非常感谢 Tushar 提供的解决方案。我将 84 行代码浓缩成 7 行代码。纯天才——我非常感激！ :-)

【参考方案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()

【参考方案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);
    );
);