jq动画

Posted 2020-09-25 心肺

今天发表的内容是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”，否则，无法移动该元素的位置。

 

　　

　　以上是我所发表的内容，希望对各位有所帮助！