animate在不支持display属性后该怎么办？

在最近一个项目中遇到一个问题，用jQuery写animate的display属性没起效果。

$('.left').animate({'display':'block'},500)

没有任何效果。

然后各种搜索，对jQuery库内animate()的方法进一步了解，得知这样的一个情况：

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

这句话的意思是：

注：不同于速记动画等方法  .slidedown()和.fadein()，这个.animate()方法不使隐藏元素的可见部分的影响。例如，给定的$('someelement').hide().animate({height:“20px”}，500)，动画将运行，但会保持隐藏元素。

不难看出animate()方法对于元素的hide()和show()是无效的，如果我们真想采用animate()方法进行动画显隐，可以无偿利用opacity属性（透明度）来实现。

元素显示也就是元素的opacity不透明属性为1，元素隐藏也就是元素的opacity不透明属性为0。

所以可以这样写：

//显示元素
$('.left').show();
$('.left').animate({opacity:1},500);

//隐藏元素
$('.left').animate({opacity:0},500);
$('.left').hide();

或者用渐入渐出的方法也可以：

//显示弹窗元素
$('.left').fadeIn();
 
//隐藏弹窗元素
$('.left').fadeOut();