简介

除了预置的效果方法外，JQuery还提供了一个强大的.animate()方法。用于创建控制更加精细的自定义动画。.animate()方法有两种形式，第一种形式接收以下4个参数。

（1）一个包含样式属性及值得映射

（2）可选的速度参数——既可以是预置的字符串，也可以是毫秒数值

（3）可选的缓动（easing）类型

（4）可选的回调函数

把这4个参数放在一起，结果如下所示：

第一种形式：

.animate( { property1: 'value1'、property2: 'value2'}),

speed,easing,function( ) {

alert( 'The animation is finished.' );

}

);

第二种形式接收两个参数，一个属性映射和一个选项映射：

.animate( { properties },{ options } )

示例

自定义动画属于高级应用，在这里我暂时无法做详细的讲解。下面通过两个示例让大家简单了解如何使用自定义动画。

这个示例让一个图层从屏幕最上方掉落到最下方，并且消失。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>      
<title>jQuery Animation - fadeTo </title>        
<script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>        
<script type="text/javascript">          
$(document).ready(function()          
{              
$("#divPop")              
.animate(              
{                  
"opacity": "hide",                  
"top": $(window).height() - $("#divPop").height() - $("#divPop").position().top              
},              
600,              
function() { $("#divPop").hide(); }              
);          
});      
</script>    
</head>  
<body>             
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;           
width: 300px; height: 100px; position:absolute;">          
<div style="text-align: center;">弹出层</div>      
</div>  
</body>  
</html>

自定义消散动画:

这个示例让一个div越来越大最后消失。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>      
<title>jQuery Animation - fadeTo </title>        
<script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>        
<script type="text/javascript">          
$(document).ready(function()          
{              
$("#divPop")              
.animate(              
{                  
"opacity": "hide",                  
"width": $(window).width()-100 ,                  
"height": $(window).height()-100              
},              
500              
);          
});      
</script>    
</head>  
<body>             
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;           
width: 300px; height: 100px; position:absolute;">          
<div style="text-align: center;">弹出层</div>      
</div>  
</body>  
</html>

提示: 下面两个示例使用vsdoc2智能提示版本的jQuery类库在FireFox下存在透明度无法渐变的问题。请使用其他版本。

自定义坠落动画。

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载