解析jQuery效果函数animate，

2024-03-03 05:07•mysql•阅读 4923

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>

<title>演示自定义animate方法效果</title>

　　$(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>

</body>

</html>