fadeIn() 在 hide() 之后不工作，hide() 没有达到 .done()

Question

我有一个问题，fadeIn() 在 hide() 或 fadeOut() 之后拒绝工作。我正在尝试使用淡入淡出动画切换 div (#content)。乍一看，它似乎有效，但当尝试第二次切换时，事情就坏了。

我将尝试描述错误是如何发生的：

第一步： fadeIn()（有效）

 $('.popup a').click(function(){
        $("#content").css("background-color", "#DDD").fadeIn(200); // works, display changes to block
        $('#content').children().fadeIn(600, function(){
            $("#content").animate({
                "border-top-width": "6px"
            }, 200);  
        });        
 });

这确实完美无缺。

第二步： hide()（有点破？）

$('.header li').click(function (){
        $('#content').children().fadeOut(300, function(){ // works
            $('#content').animate({ //works
                    width: "0%",
                    height: "0%",
                    left: "49%",
                    right: "49%",
                    top: "49%",
                    bottom: "49%",
                    "border-top-width": 0
            }, 200).queue(function(){
                    $('#content').hide().promise().done(function(){ //works! display changes to none
                        alert("Done hide()");  // this never fires  
                    });
            });
        });

}

这有效，但在 hide() 完成后永远不会触发警报。同样的事情发生在 fadeOut();

第一步，第二步运行: fadeIn()（根本不起作用）

 $('.popup a').click(function(){
        $("#content").css("background-color", "#DDD").fadeIn(200); // doesn't work! display remains set to none
        $('#content').children().fadeIn(600, function(){ // works
            $("#content").animate({
                "border-top-width": "6px"
            }, 200);  
        });        
 });

这是它完全崩溃的地方，#content 上的 fadeIn() 不起作用。

style.css 对于#content（初始状态）：

#content{
  display:none;
  width:100%;
  height:100%;
  background:red;
  position:absolute;
  top:0;
  left:0;
  z-index: 99999999;    
}

如果有任何帮助，我将不胜感激，在此先感谢您。

Answer 1

根据 jQuery .Queue 文档：

"Note that when adding a function with jQuery.queue(), we should ensure that jQuery.dequeue() is eventually called so that the next function in line executes."

因此，您需要做的就是在第 2 步中调用 .dequeue：

$('.header li').click(function () {
    $('#content').children().fadeOut(300, function () { // works
        $('#content').animate({ //works
            width: "0%",
            height: "0%",
            left: "49%",
            right: "49%",
            top: "49%",
            bottom: "49%",
                "border-top-width": 0
        }, 200).queue(function () {
            $('#content').hide().promise().done(function () { //works! display changes to none
                alert("Done hide()"); // this never fires  
            });
            //add this line
            jQuery.dequeue(this);
        });
    });
});

fadeIn() 在 hide() 之后不工作，hide() 没有达到 .done()

fadeIn() not working after hide(), hide() not reaching .done()

jquery

toggle

fadein

fadeout