jQuery 淡出不起作用

Question

function fadeInSubheader() {
    $('#sub1').fadeIn().delay(1000).queue(function() {
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $('#sub3').fadeIn().delay(5000).queue(function() {
                fadeOutSubheader();
            });
        });
    });

}

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1').fadeOut(function() {
        $('#sub2').fadeOut(function() {
            $('#sub3').fadeOut(function() {
                fadeInSubheader();
            });
        });
    });
}

一旦开始就应该循环。但它会启动并调用 fadeOutSubheader 函数，因为控制台日志显示“淡出”，就像它应该的那样，但它们不会淡出。有什么想法吗？

PS。淡出应该最好完全发生。

Answer 1

根据jQery doc对于 .queue()，当您使用 .queue(fn) 时，您必须在函数中使用 .dequeue() 才能保持正常运行适本地。您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/Py2hL/ .

function fadeInSubheader() {
    $('#sub1').fadeIn().delay(1000).queue(function() {
        $(this).dequeue();
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $(this).dequeue();
            $('#sub3').fadeIn().delay(5000).queue(function() {
                $(this).dequeue();
                fadeOutSubheader();
            });
        });
    });

}

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1').fadeOut(function() {
        $('#sub2').fadeOut(function() {
            $('#sub3').fadeOut(function() {
                fadeInSubheader();
            });
        });
    });
}

如果您确实希望 fadeOut 全部一起运行，请用此替换 fadeOutSubheader() 以便一次运行它们:

function fadeOutSubheader() {
    console.log('fading out');
    $('#sub1, #sub2').fadeOut();
    $('#sub3').fadeOut(fadeInSubheader);
}

这是在这里实现的:http://jsfiddle.net/jfriend00/BYGpa/