jquery动画效果

今天给大家介绍一下jQuery当中的几种动画效果。

. animate() 自定义动画

stop() 停止运行动画

fadeIn()/fadeOut()/fadeTo() 淡入淡出

1、animate() 自定义动画

（1）定义和用法：

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

（2）语法1：

animate(styles,speed,easing,callback)

参数style： 必需。规定产生动画效果的 CSS 样式和值。speed：可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"easing：可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swinginearcallback：可选。animate 函数执行完之后，要执行的函数。

（3）语法2：

animate(styles,options)

参数style： 必需。规定产生动画效果的 CSS 样式和值。callback：可选。规定动画的额外选项。可能的值：speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

（4）代码示例：

//改变 "div" 元素的高度：$(document).ready(function() {$(".btn1").click(function(){$("#box").animate({height:"300px"});});});

2、stop() 停止动画运行

（1）定义和用法：

stop() 方法停止当前正在运行的动画。

（2）语法：

stop(stopAll,goToEnd)

参数stopAll： 可选。规定是否停止被选元素的所有加入队列的动画。goToEnd：可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用

（3）代码示例：

//停止当前正在运行的动画：<script type="text/javascript"> $(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},2000);$("#box").animate({height:100},2000);});$("#stop").click(function(){$("#box").stop();});});</script>

2、 fadeIn()/fadeOut()/fadeTo() 淡入淡出

2.1fadeIn()

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

（1.1）语法：

fadeIn(speed,callback)

参数speed： 可选。规定元素从隐藏到可见的速度。默认为 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。callback：可选。fadeIn 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡入效果来显示一个隐藏的 <p> 元素：<script type="text/javascript">$(document).ready(function(){$(".btn").click(function(){$("p").fadeIn();});});</script>

提示：如果元素已经显示，则该效果不产生任何变化，除非规定了 callback 函数。

2.2 fadeOut()

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

（1.1）语法：

fadeOut(speed,callback)

参数speed： 可选。规定元素从可见到隐藏的速度。默认为 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。callback：可选。fadeOut 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡出效果来隐藏一个 <p> 元素：<script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("p").fadeOut()});});</script>

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

2. 3 fadeTo()

- fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

（1.1）语法：

fadeTo(speed,opacity,callback)

参数speed： 可选。规定元素从当前透明度到指定透明度的速度。可能的值：毫秒 （比如 1500）"slow""normal""fast"opacity：必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。callback：可选。fadeTo 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

（3）代码示例：

//使用淡出效果来隐藏一个 <p> 元素：<script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("p").fadeTo(1000,0.4);});});</script>

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

以上内容希望对您有所帮助！

jquery动画效果 animate() 自定义动画stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo()淡入淡出