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

根据.queue()的{{3}}，当您使用.queue(fn)时，您必须在函数中.dequeue()才能保持正常运行。你可以在这里看到它：jQery doc。

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

如果你真的想要将fadeOuts全部放在一起，那么用这个替换fadeOutSubheader()就可以立即运行它们：

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

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

Answer 2

您没有使用导致循环问题的.dequeue()。根据文档，“dequeue基本上删除并执行队列中的下一个函数，让序列继续。”
要一次淡出所有3个项目，就像你想要的那样，只需使用：$('#sub1,#sub2,#sub3').fadeOut()然后使用一次回调，对所有3个渐变使用：.promise().done(fadeInSubheader)（参见下面的示例））

<强> Working example

$(function() { // on ready

    // Define functions as local variables
var fadeInSubheader = function() {
    $('#sub1').fadeIn().delay(1000).queue(function() {            
        $('#sub2').fadeIn().delay(1000).queue(function() {
            $('#sub3').fadeIn().delay(5000).queue(function() {
                fadeOutSubheader();
                $(this).dequeue();
            });
            $(this).dequeue();
        });
        $(this).dequeue();
    });

}, 
fadeOutSubheader = function() {
    console.log(++i);
    // since jQuery 1.6 you can use promise / done so that 
    // the callback only happeens once - default is once for each element
  $('#sub1,#sub2,#sub3').fadeOut(1000).promise().done(fadeInSubheader);        
}, i=0;

    // Let's start the loop!
    fadeInSubheader();

});

jQuery FadeOut无法正常工作

2 个答案: