标签：ide add 运行 back margin 运行时 注意 jquery one
今天发表的内容是js动画，接下来呢 ，我给大家来阐述一下(4点)：
1.显示隐藏动画效果
2.淡入淡出动画效果
3.滑入滑出动画效果
4.自定义动画
显示与隐藏动画效果
show()方法与hide()方法--toggle()方法
show()方法会动态的改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。
show()方法的语法结构为：
jQuery队象.show(duration,[fn]);
参数duration表示动画效果运行时间，可以使用的关键字slow、normal和fast,分别对应时间的长度0.6秒、0.4秒和0.2秒，
参数要加引号；也可以是用数值，单位默认为毫秒，此时参数不需要加引号。
hide()方法会动态改变当前元素的高度、宽度和不透明，最终隐藏当前元素，此时元素的css属性display修改为none.
其语法结构为：jQuery对象.hide(duration,[fn]);
toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。
即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。
其语法结构为：jQuery对象.toggle(duration,[fn]);
淡入淡出的动画效果
fadeIn()方法与fadeOut()方法 fadeIn()方法动态地改变当前元素的透明度(其他不变)，实现淡入的动画效果，最终显示当前元素，
此时元素的css属性display恢复除了none之外的初始值。
fadeIn()方法的格式如下：jQuery对象.fadeIn(duration,[fn]);
fadeOut()方法动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素，
此时元素的css属性display修改为none。
fadeOut()方法的格式如下：jQuery对象.fadeOut(duration,[fn]);
fadeToggle()会动态地改变当前元素的透明度，最终切换当前元素的可见状态。
即如果元素是可见的，则通过淡出效果切换为隐藏状态；如果元素是隐藏的，则通过淡入效果切换为可见状态。
其语法结构为：jQuery对象.fadeToggle(duration,[fn]);
在jQuery中，fadeIn()和fadeOut()方法通过改变元素的透明度来实现元素的显示和隐藏，其透明度从0.0到1.0淡入或从1.0到0.0淡出，从而实现淡入淡出的动画效果；如果要将透明度指定到某一个值，则需要调用fadeTo()方法。
fadeTo()的语法格式为：jQuery对象.fadeTo(duration,opacity,[fn]);
参数duration为动画效果的速度，使用方式与hide()、show()方法等一致；参数opacity用于指定不透明值，取值范围是0~1，0代表完全透明，1代表完全不透明。
滑入与滑出动画效果
slideDown()方法与slideUp()方法
slideDown()方法会动态地改变当前元素的高度（其他不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。
slideDown()方法的语法格式如下：jQuery对象.slideDown(duration,[fn]);
slideUp()方法会动态地改变当前元素的高度，由下到上滑出，即高度向上减小，直至最终隐藏当前元素，此时元素的css属性display修改为none。slideUp()方法的语法格式请参考slideDown()方法。
slideToggle()方法会动态地改变当前元素的高度，最终切换当前元素的可见状态。即如果元素是可见的，则通过滑出效果切换为隐藏状态；如果元素是隐藏的，则通过滑入效果切换为可见状态。
其语法结构为：JQuery对象.slideToggle(duration,[fn]); 其参数参考show()方法。
自定义动画
animate()方法可以动态地改变当前元素的各种css属性。
其语法结构为：jQuery对象.animate(properties,[duration],[fn]);
其中，参数properties使用一个“名：值”形式的对象，用来设置需要改变的css属性。animate()方法只能改变可以取数字值的css属性，如大小属性（width、height）、边框属性（border-width）、外边距属性（margin）、内边距属性（padding）、定位属性（top、left、bottom、right）、字体属性（font-size）、文本属性（text-indent、letter-spacing、word-spacing）、背景属性（background-position）和透明度（opacity）。
可以缺省的参数duration和fn请参考show()方法的说明。
自定义中需要注意的问题：
如果要实现页面中的元素以动画效果移动，必须首先将元素的“position”属性设置为“relative”或“absolute”，否则，无法移动该元素的位置。
以上是我所发表的内容，希望对各位有所帮助！
标签：ide add 运行 back margin 运行时 注意 jquery one
原文地址：http://www.cnblogs.com/zy17600095897/p/7087204.html
