jquery特別注意:animate 不支持 display:none;block

不是全部樣式屬性都 會被動畫 animate 所支持的。好比我今天作的一個小demo，js代碼以下：

【解決方案】若是實在要顯示與隱藏對象，能夠操做它的opacity屬性來控制；

特別注意： 當與 animate() 方法一塊兒使用時，該屬性名稱必須是駝峯寫法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。

$(function(){
				$("#btn-menu").click(function(){
				var current_opacity = $(".slidebar").css("opacity")
					if( current_opacity==1)
				
					{
						//特別注意:animate 不支持 display:none;block
						
						$(".right").animate({ 
	                    	marginLeft:0,
						}, 700, 'easeOutCubic');  
						
						$(".slidebar").animate({ 
                  		 	width:0,
	                    	opacity:0
						    //display: "none"  
						}, 50, 'easeOutCubic');		                 			 
					}
					else
					{ 
						$(".right").animate({ 
	                    	marginLeft:200,
						}, 700, 'easeOutCubic');  
						
						$(".slidebar").animate({ 
	                    	width:200,
	                    	opacity:1
						    //display: "block" 
						},  700, 'easeOutCubic');	
					}
					
				})
			})

如下樣式能夠用做動畫： 

* backgroundPosition
 * borderWidth
 * borderBottomWidth
 * borderLeftWidth
 * borderRightWidth
 * borderTopWidth
 * borderSpacing
 * margin
 * marginBottom
 * marginLeft
 * marginRight
 * marginTop
 * outlineWidth
 * padding
 * paddingBottom
 * paddingLeft
 * paddingRight
 * paddingTop
 * height
 * width
 * maxHeight
 * maxWidth
 * minHeight
 * maxWidth
 * font
 * fontSize（在animate函數的css參數指定並不一樣於標準css屬性，例如這個css標準是：font-size。同理上面不少也是這樣的狀況）
 * bottom
 * left
 * right
 * top
 * letterSpacing
 * wordSpacing
 * lineHeight
 * textIndent
 * opacity