爲什麼我的jQuery動畫無效？

我一直使用jQuery動畫，但這次因爲某種原因失敗。它會起作用，我試圖在closeBtn點擊之後將'$（this）.animate'作爲目標，並且它會起作用。爲什麼我的jQuery動畫無效？

這裏是我的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; 
}

來源

2013-04-16 Matt Ryan

你只用過這些ID一次，對不對？ – adeneo

您是否嘗試過console.log（「test」）;在各個步驟中查看您的代碼正在崩潰的哪一行？或者你看過你的控制檯，看看是否有錯誤？ – ntgCleaner

對於這樣的事情，你也應該創建一個jsfiddle。讓我們的生活更輕鬆。 – user1048676

你要移到$('#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'); 
      }); 
     }); 
    }); 

});

更新：好吧...這裏是第2部分

你要設置$('#lightBox').animate({到$('#lightBox').stop().animate({然後將繼續「密切「動畫。

來源

2013-04-16 22:19:17 doitlikejustin

我不敢相信我看過那個！但它仍然無法正常工作。 –

什麼仍然不起作用？ – doitlikejustin

好吧，我想我明白了。更新我的回答 – doitlikejustin

糾正我，如果我錯了，但嘗試改變荷蘭國際集團這樣的：

position: fixed;

到position: absolute;或position: relative;

來源

2013-04-16 22:13:20

位置：固定;讓我有點緊張。我知道如果你不設置一個元素的位置：相對或位置：絕對在CSS中，jQuery不會動畫它。只是不確定位置：固定。 –

我使用的是固定的，因爲我總是希望面板成爲焦點，所以用戶無法從它滾動，它是一種lightbox.I以前使用過此方法，並修復了jquery animate.Yes的作品，所有ID都只用於一次在文檔中。我使用alert（）進行測試。 –

爲什麼我的jQuery動畫無效？

回答

相關問題