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（）不起作用。

对于#content（初始状态）

style.css：

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

我将不胜感激，谢谢你们。

Answer 1

根据jQuery .Queue文档：

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

因此，您需要做的就是在第二步中调用.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（）没有达到.done（）

1 个答案: