在最近一個(gè)項(xiàng)目中遇到一個(gè)問題，用jQuery寫animate的display屬性沒起效果。

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

沒有任何效果。

然后各種搜索，對jQuery庫內(nèi)animate()的方法進(jìn)一步了解，得知這樣的一個(gè)情況：

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()，這個(gè).animate()方法不使隱藏元素的可見部分的影響。例如，給定的$('someelement').hide().animate({height:“20px”}，500)，動畫將運(yùn)行，但會保持隱藏元素。

不難看出animate()方法對于元素的hide()和show()是無效的，如果我們真想采用animate()方法進(jìn)行動畫顯隱，可以無償利用opacity屬性（透明度）來實(shí)現(xiàn)。

元素顯示也就是元素的opacity不透明屬性為1，元素隱藏也就是元素的opacity不透明屬性為0。

所以可以這樣寫：

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

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

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

//顯示彈窗元素
$('.left').fadeIn();
 
//隱藏彈窗元素
$('.left').fadeOut();