fadeIn() не работает после hide(), hide() не достигает .done()

Question

У меня проблема с fadeIn() отказом работать после hide() или fadeOut(). Я пытаюсь переключить div (#content) с анимацией затухания. На первый взгляд, похоже, это работает, но когда вы пытаетесь переключиться во второй раз, все ломается.

Я попытаюсь описать, как происходит ошибка:

1-й шаг: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); 
     });   
}); 

Это работает безупречно.

второй шаг:скрыть() (? Несколько сломан)

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

} 

Это работает, но тревога не срабатывает после того, как шкура() завершается. То же самое происходит с 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); 
     });   
}); 

Это где он распадается полностью, FadeIn() на #content не работает.

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 документации:

«Обратите внимание, что при добавлении функции с 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); 
     }); 
    }); 
});