锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / JQuery / 创建自定义动画
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

简介


除了预置的效果方法外,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下存在透明度无法渐变的问题。请使用其他版本。

自定义坠落动画。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内