淡入（）隐藏后不工作（），隐藏（）未达到.done（）(fadeIn() not working a

我有淡入（有问题）拒绝隐藏（）或淡出（）后，开始工作。我试图切换一个div（＃内容）与动画渐变。乍看之下，这似乎工作，但试图切换一个第二遍的时候，事情打破。

我会尽力来描述如何在错误发生时：

第1步： 淡入（）（作品）

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

这不完美的工作。

第二步： 隐藏（）（在一定程度上打破？）

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

}

这工作，但隐藏后报警永远不会触发（）完成。同样的事情发生的淡出（）;

第1步，第二次运行： 淡入（）（不工作在所有）

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

这是它完全打破，淡入（）在＃内容不起作用。

的style.css为＃内容（初始状态）：

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

我希望得到任何帮助，谢谢提前。

根据jQuery的.Queue文档：

“请注意，添加与jQuery.queue（）函数时，我们应该确保jQuery.dequeue（）最终被调用，所以在线上的下一个函数执行。”

因此，所有你需要做的就是调用.dequeue在第2步：

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