解析jQuery效果函数animate()

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解析jQuery效果函数animate()相关的知识,希望对你有一定的参考价值。

1、参数说明:

  animate(params,[speed],[easing],[fn])

  params:一组包含作为动画属性和终值的样式属性和及其值的集合<br/>
  speed:三种预定速度之一的字符串("slow"600ms,"normal"400ms, or "fast"200ms)或表示动画时长的毫秒数值(如:1000)<br/>
  easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".<br/>
  fn:在动画完成时执行的函数,每个元素执行一次。<br/>
2、注意点:  

  1、通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。如:left:"-50px",表示相对位置左移动50px;

    应该设置目标对象的position:relative这个属性值,否则无效.
  2、所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
  3、所有的可创建动画效果的属性必须是一个单一的数值,例如 宽度(width)、高度(height)、左边距(left)、透明度(opacity)等,

    但是不能是background-color。  

    注:要实现颜色的动画效果,必须使用 jQuery.Color() 插件。除非特殊声明,否则这些属性的单位都按照像素处理,可以使用的其他单位还包括 em 和 % 百分比。
  4、opacity:"show"表示1或"hide"表示0或"0.4等小数"
3、示例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>演示自定义animate方法效果</title>
<script src="../jQuery/jquery-3.1.0.min.js"></script>
<script>
  $(function(){
    $("#idleft").click(function(){
      $("#idsection").animate({left:"+200px"},"slow"); //在相对位置上向右频移
    })
    $("#idheight").click(function(){
      $("#idsection").animate({marginLeft:+200,height:200,width:200,borderWidth:50,fontSize:50,opacity:0.3},1000);//长度默认为像素单位
    })
  })

</script>
</head>

<body>
<h2>演示自定义animate方法效果</h2>
<input type="button" value="height" id="idheight">&nbsp;
<input type="button" value="left" id="idleft">&nbsp;
<section style="width:50px;height:50px;background-color:#999;position:relative" id="idsection">演示</section>
</body>
</html>


  

以上是关于解析jQuery效果函数animate()的主要内容,如果未能解决你的问题,请参考以下文章

jquery animate方法动画效果没有

jQuery animate()动画效果

用jquery的animate动画函数做的网页效果

jquery animate 动画效果使用说明

jquery的animate动画能不能在IE中执行

jQuery动画animate()的使用