基本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！

回答

相关问题