jQuery中animate()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中animate()方法用法。分享给大家供大家参考。具体分析如下:

此方法用于创建自定义动画,并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。

animate()方法的使用:

方式一:

以“属性名/值”对象的方式定义动画终止样式属性。例如:

$("div").animate( {width:"1000px"})

以上代码能够将div从原有的宽度调整到1000px。也可以一次性使用多组“属性名/值”对象。例如:

$("div").animate( {width:"1000px",fontSize:20})

以上代码能够将div从原有的宽度调整到1000px,从原有的字体大小调整到20px。需要特别注意以下三点:

1.如果尺寸没有单位,那么默认单位是px。
2.属性值需要用双引号包裹,如果属性值是数字的话可以省略。
3.类似font-szie或者background-color这样的属性需要去掉中间的中横线,并且第二个单词首字母要大写。

animate()方法可以明确的规定动画效果持续的时间,如果不规定则使用默认值normal。例如:

$("div").animate( {width:"1000px",fontSize:20},2000)

以上代码规定动画效果在2000毫秒(2秒)后完成。
在动画执行完成后可以调用回调函数。例如:

$("div").animate( {width:"1000px"},5000,function(){alert("调整完成")})

以上代码能够在动画完成以后触发回调函数,于是弹出一个提示框。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<style type="text/css"> 

div{ 

  width:150px; 

  height:150px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript">  

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div").animate( {width:"1000px",fontSize:20},5000,function(){alert("调整完成")}); 

  }); 

}); 

</script>  

</head> 

<body> 

  <div>小蚂蚁</div> 

  <button id="btn1">执行个动画</button> 

</body> 

</html>

方式二:
方式一中,只有定义动画终止样式属性的时候使用大括号{},后面比如动画速度、回调函数等等都是裸露的,他们之间都是用逗号间隔。在我们将要介绍的方式二中,速度、回调函数、队列等等都要放在大括号{}中。
例如:

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

queue参数可以规定动画是否加入动画队列执行,如果进入动画队列,将按照顺序执行,也就是第一个动画执行完成之后,队列中的第二个动画再执行,以此类推。如果queue参数值为true就是将动画加入队列执行,否则就是不加入队列。
duration参数就是定义动画的持续时间。
complete参数定义动画的回调函数。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

.first{

  width:150px;

  height:150px;

  border:1px solid blue;

}

.second{

  width:150px;

  height:150px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">  

$(document).ready(function(){ 

  $("#btn1").click(function(){ 

    $(".first").animate({width:"1000px"},{queue:true, duration:5000,complete:function a(){alert("宽度设置完成")}})

.animate( {fontSize:'7em'},{queue:true, duration:5000}) 

.animate( {borderWidth:10},{queue:true, duration:5000,complete:function a(){alert("宽度设置完成")}}); 

  }); 

   

  $("#btn2").click(function(){ 

    $(".second").animate({width:"1000px"},{queue:false, duration:1000}) 

.animate( {fontSize:'7em'} , 1000 )

.animate( {borderWidth:10}, 1000); 

  })

}) 

</script>

</head>

<body>

<div class="first">欢迎来到三水点靠木</div>

<div class="second">欢迎来到三水点靠木</div>

<button id="btn1">执行第一个动画</button>

<button id="btn2">执行第二个动画</button>

</body>

</html>

大家可以对比一下加入动画队列和不加入动画队列执行效果。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js实现数组转换成json
Jun 26 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery中fadeOut()方法用法实例
Dec 24 #Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
使用jquery动态加载js文件的方法
Dec 24 #Javascript
使用javascript实现Iframe自适应高度
Dec 24 #Javascript
You might like
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php smarty的预保留变量总结
2008/12/04 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
浅谈node的事件机制
2017/10/09 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python 公共方法汇总解析
2019/09/16 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python IP地址转整数
2020/11/20 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL