0

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

我有一个带有锚链接的字母 AZ 索引。当有人单击特定链接（字母）时，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);
    });
});
4

3 回答 3

3

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

^ 属性以选择器开始

* 属性包含选择器/

于 2013-11-15T01:48:57.357 回答
1

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

尝试使用 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()

于 2013-11-15T01:52:39.140 回答
0

试试这个

$('#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);
    });
});
于 2013-11-15T01:53:34.597 回答