Почему моя анимация jQuery не работает?

Question

Я использую jQuery для анимации все время, но на этот раз он по какой-то причине не работает. Он будет работать, я пытаюсь настроить «$ (this) .animate» после щелчка closeBtn, и он будет работать, как бы то ни было.

здесь часть моей HTML (в relivant части, да и я назвал библиотеку JQuery)

<div id='lightBox' style="opacity:0;"> 
    <div id='closeBtn'> 
    </div> 
    <div id='lightBoxContent'> 
    </div><!--lightBoxContent--> 
</div><!--lightBox--> 

вот мой JQuery

$(document).ready(function() 
{ 
    $('#quoteBtn').click(function() 
    { 
     $('#lightBox').animate({ 
      opacity:'1', 
      height:'560px' 
     }, 300, function() { 
      $('#lightBoxContent').html(output); 
     }); 


     $('#closeBtn').click(function() 
     { 
      //alert('click'); 
      $('#lightBox').animate({ 
       opacity:'0' 
      }, 300, function() { 
       //alert('first animation complete'); 
       $('#lightBox').animate({ 
        height:'0px' 
       }, 300, function() { 
        //alert('second animation complete'); 
       }); 
      }); 
     }); 
    }); 
}); 

и мой CSS (это не на самом деле это требование, но я включил его для безопасной меры

#lightBox { 
    width:780px; 
    background-color:white; 
    position:fixed; 
    margin-left:-400px; 
    margin-top:-300px; 
    left:50%; 
    top:50%; 
    z-index:9999; 
    -webkit-box-shadow: 0px 0px 200px 50px ; 
    box-shadow: 0px 0px 200px 50px ; 
    padding:20px; 
} 

Answer 1

Вы хотите переместить $('#closeBtn').click(function() вне функции мыши() вызывается, когда #quoteBtn является щелчок. Потому что он никогда не будет вызван, так как вы не можете щелкнуть внутри щелчка.

Вот что он должен выглядеть следующим образом:

$(document).ready(function() 
{ 
    $('#quoteBtn').click(function() 
    { 
     $('#lightBox').animate({ 
      opacity:'1', 
      height:'560px' 
     }, 300, function() { 
      $('#lightBoxContent').html(output); 
     });  
    }); 

    $('#closeBtn').click(function() 
    { 
     //alert('click'); 
     $('#lightBox').animate({ 
      opacity:'0' 
     }, 300, function() { 
      //alert('first animation complete'); 
      $('#lightBox').animate({ 
       height:'0px' 
      }, 300, function() { 
       //alert('second animation complete'); 
      }); 
     }); 
    }); 

}); 

Update: Ok ... Вот часть 2.

Вы хотите установить $('#lightBox').animate({ в $('#lightBox').stop().animate({, который будет затем продолжить «закрыть "анимация.

Answer 2

Исправьте меня, если я ошибаюсь, но попробуйте чанг ИНГ это:

position: fixed; 

к position: absolute; или position: relative;