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

最新推荐文章于 2023-05-24 13:16:04 发布

weixin_34198881

最新推荐文章于 2023-05-24 13:16:04 发布

阅读量935

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/583531/blog/915709

版权

2019独角兽企业重金招聘Python工程师标准>>>

不是所有样式属性都会被动画 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

转载于:https://my.oschina.net/u/583531/blog/915709