j查询淡入和淡出问题

jquery issue with fadeIn and fadeOut

本文关键字：淡出 出问题 淡入 查询      更新时间：2023-09-26

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

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

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

^ 属性开始与选择器

* 属性包含选择器/

正在发生的事情是单击时出现一些奇怪的时间和延迟问题 在字母之间来回。

尝试使用 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（）

试试这个

$('#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);
    });
});
相关文章：