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

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 函数：
                               swing
                                inear
   

callback：可选。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 函数。

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