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

问题

I have a problem with fadeIn() refusing to work after hide() or fadeOut(). I am trying to toggle a div (#content) with a fade animation. On first glance, it seems to work but when trying to toggle a second time, things break.

I'll try to describe how the error occurs:

1st Step: fadeIn() (works)

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

This does work flawlessly.

2nd Step: hide() (is somewhat broken?)

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

}

This works but the alert never fires after hide() completes. The same thing happens with fadeOut();

1st Step, 2nd run: fadeIn() (does not work at all)

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

This is where it breaks completely, fadeIn() on #content doesn't work.

style.css for #content (initial state):

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

I would appreciate any help, thank you in advance.

回答1:

according to jQuery .Queue documentation:

"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."

therefore, all you need to do is call a .dequeue in your 2nd step:

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

来源：https://stackoverflow.com/questions/28517765/fadein-not-working-after-hide-hide-not-reaching-done