基本JQuery .animate（）不起作用，但可以使用.css（）更改相同的CSS！

我有我一直在試圖解決一個問題的bizzare。它非常基本，但我不明白。這裏是。我正在使用JQuery將div元素的簡單顯示設置爲「無」的「塊」。我嘗試以下兩種選擇：基本JQuery .animate（）不起作用，但可以使用.css（）更改相同的CSS！

$('#fort_link').click(function(){ 
    $('#fort_content').animate({'display':'block'},500); 

}); 

$('#fort_link').click(function(){ 
    $('#fort_content').animate({display:'block'},500); 

});

我也試圖與回調函數動畫完成後，它並提醒我，但沒有真正發生，只要設置div來塊的顯示。

但是，當我嘗試使用簡單的CSS方法如下圖所示，它的工作原理，符合市場預期。我正在使用JQuery 1.10.2。我甚至嘗試鏈接到CDN上的Google的Jquery UI。我不是這些東西中的新手......可能只是想念一些愚蠢的東西？請幫忙！

$('#fort_link').click(function(){ 
    $('#fort_content').css('display','block'); 
});

來源

2014-01-13 Sam

'.animate（）'只能用於顯示數字的CSS屬性（頂部，寬度等等）fadeIn/fadeOut建議如下 –

從jQuery文檔：

所有動畫處理的屬性應該被動畫化以單一數值，除了下面提到;那些非數字不能使用基本jQuery的功能性來動畫大多數屬性（例如，寬度，高度，或左可以是動畫，但背景顏色不能

因此，基本上，你不能「有生'block。

來源

2014-01-13 18:59:18

非常感謝。我接受你的答案，因爲你教會了我一些我不知道的事情，這將有助於我在將來避免類似的錯誤。謝謝！！！ – Sam

不客氣。 jquery文檔非常有用：http://api.jquery.com/ –

使用fadeIn()或fadeOut代替：

$('#fort_link_show').click(function(){ 
    $('#fort_content').fadeIn(500); 
}); 

$('#fort_link_hide').click(function(){ 
    $('#fort_content').fadeOut(500); 
});

或fadeToogle()速記。

$('#fort_link').click(function(){ 
    $('#fort_content').fadetoggle(500); 
    //#fort_content will fadeIn if its hidden, fadeOut if its visible 
});

來源

2014-01-13 18:56:13

謝謝你是對的，它的工作原理，我upvoted你的答案。接受它，除了下一個提供的信息，我不知道，並將在未來幫助其他CSS屬性？但我非常GRATEFUL。我花了很多時間搞清楚這一點... – Sam

基本JQuery .animate（）不起作用，但可以使用.css（）更改相同的CSS！

回答

相關問題