- 
							用动画和效果来装扮页面普通类
- 
							- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
 
- 
							- 
													使元素隐藏和显示
 注意:效果应该是用来增强页面的可用性而不是妨碍它,因此切忌添加花里胡哨而无实用性的效果 关于display值的应用 简单的命令应该需要记住下面几件事: - 如果元素在初始化的时候显性地将style的display属性设置成了none,那么在调用show()命令之后,元素的该值就总是被设置成block
- 如果初始化的时候没有显示设置而是调用的jQuery的hide()命令实现的隐藏,那么调用show之后,元素会还原到display的原始状态。
 因此,尽量不要利用元素的style属性使元素隐藏,而应该在页面就绪程序里使用hide()命令 实现可折叠的列表jQuery可以较方便地实现将有子项目的列表隐藏起来。通过选择器选择有子元素的元素,然后为该元素添加事件,事件中判断子元素的隐藏/显示情况进行相应的行为响应。 切换元素的显示状态用toggle()命令能更加简单地实现上面的功能. toggle() 方法切换元素的可见状态。 (如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。) - 
													以动画方式使函数显示和隐藏
 使元素逐渐的显示和隐藏完整的语法: - hide(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)
- show(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)
- toggle(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)
 使元素淡出和淡入- fadeout(speed,callback) // 将非隐藏的元素的不透明度逐渐降低到0%,然后从显示器上删除
- fadeIn(speed,callback) //通过把元素的不透明度提高到初始值,是隐藏的匹配元素显示出来
- fadeTo(speed,opacit,callback) //从当前设置到opacity所指定的新设置,调整已包装元素的不透明度
 使元素滑上和滑下- slideDown(speed,callback) //从上往下逐渐扩大元素的垂直面积,使已隐藏的匹配元素显示出来
- slideUp(speed,callback) //从下往上逐渐缩小元素的垂直面积,使非隐藏的匹配元素隐藏
- slideToggle(speed,callback) //在隐藏的元素上执行slideDown,在显示的元素上执行slideUp
 使动画停止stop() //停止当前正在运行的、包装集里的元素的所有动画 - 
													创建自定义的动画
 animate(properties,duration,easing,callback) animate(properties,options) - properties (对象) 一个散列对象,指定在动画结束时所支持的CSS样式应该达到的终值
- duration (数字|字符串) slow 、normal或fast 如果省略,则不会产生动画
- easing (字符串) 用来实现动画的缓和效果,必须通过注册,jQuery提供了linear和swing两个,前者是线性的联系操作,后者是接近动画结束时稍微加速
- callback 回调函数
- options 利用一个散列对象指定动画的参数值,支持的属性如下 duration、easing、complete(动画完成后调用的函数)、queue(如果为false,动画不会加入队列而立即运行)
 eg 一个自定义的放大动画 $('.animateMe').each(function(){ $(this).animate({ width:$(this).width() *2, height:$(this).height() *2; },2000 ); }) 上面的例子 中 红色 部分是properties参数,所以这就是散列对象的格式 
- 
													
- 
							- 标签:
- 显示
- 元素
- 效果
- 动画
- callback
- 函数
- 隐藏
- speed
 
- 
				
				加入的知识群:
 
			 
		 
	![[画风]相关资源聚合](http://www.etc.edu.cn/public/images/logos/__miniature__ (2195).jpg) 
								 
								 
						
学习元评论 (0条)
聪明如你,不妨在这 发表你的看法与心得 ~