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. 淡出最好同时发生。

- swg1cor14

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

如果你真的想让所有的淡出效果一起进行，那么请用以下代码替换 fadeOutSubheader()，以便同时运行它们：

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

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

- jfriend00

Answer 2

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

工作示例

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

});

- Peter Ajtai

---

因为他希望它们按顺序进行，而不是同时进行。 - jfriend00

@jfriend00 - 从原帖来看，“淡出最好一起完成。” - Peter Ajtai

根据jQuery文档，您的解决方案将调用fadeInSubheader()三次，每次为一个正在淡出的div？ - jfriend00

@jfriend00 - 我进行了编辑，使用promise/done - 查看我的示例中的控制台 - http://jsfiddle.net/pajtai/uV2Qj/ - 你可以看到它的fadeOut每次只被调用一次 per fadeOutSubheader - Peter Ajtai

@swg1 - 在我看来，它们似乎同时淡出 ==> http://jsfiddle.net/pajtai/uV2Qj/ - Peter Ajtai