Question

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

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

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/

Answer 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（）

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

fadeIn和fadeOut的jquery问题

3 个答案: