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