jQuery 애니메이션이 작동하지 않는 이유는 무엇입니까?

Question

jQuery animate를 항상 사용하지만 이번에는 어떤 이유로 실패합니다. 그것은 그것을 작동합니다 closeBtn 클릭 후 '$ (this) .animate'를 타겟팅하려고하면 작동합니다. 여기

내 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

position: absolute;에 또는 position: relative; 당신은 #quoteBtn이 클릭 될 때 호출되는 클릭() 함수의 $('#closeBtn').click(function() 외부 이동하려는. 클릭 한 번으로 클릭 할 수 없으므로 절대로 호출되지 않기 때문입니다.

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

}); 

업데이트 : 여기

그것이 어떻게 보일지입니다 좋아요 ... 여기 그런 다음 "가까이 계속 된 $('#lightBox').stop().animate({에 $('#lightBox').animate({을 설정하려는 일부 2.

입니다 "애니메이션.

Answer 2

제가 틀렸을 때 수정하십시오,하지만 chang 이 보내고 :

position: fixed;