javascript - 基本的 JQuery .animate() 不起作用，但可以使用 .css() 更改相同的 CSS!

Question

我有一个奇怪的问题，我一直在努力解决。它非常基本，但我就是不明白。这里是。我正在使用 JQuery 将 div 元素的简单显示动画化为“无”的“ block ”。我尝试了以下两个选项:

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

Answer 1

使用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
});