为什么这个动画显示无阻止不工作？

Question

为什么这个动画显示无阻止不起作用？

第一段代码看起来像这样，而且效果很好

$(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100);

当我将display: none;添加到课程box_outer并添加, display: 'block'

时

我的动画效果不起作用，我该怎么做？

$(".box_outer").stop().animate({top: '25px' , display: 'block' , opacity: 1}, 100); 

Answer 1

animate()方法仅适用于具有数值的属性，display不是其中之一，请尝试

$(".box_outer").stop().show().animate({top: '25px', opacity: 1}, 100);

或者如果您还要为显示设置动画，请将高度设置为0，然后使用height: 'show'作为动画属性

Answer 2

您无法为display设置动画。请参阅此文章以获取解决方法

http://www.impressivewebs.com/animate-display-block-none/

现场演示：http://jsbin.com/iZUGaKI/1/

Answer 3

据我所知你不能动画显示属性，但你可以使用show（）hide（）或fadeIn（）fadeOut（）用于相同的目的，它们将适用于display：none

$(".box_outer").show(100);

OR

$(".box_outer").fadeIn(100);