jQuery使用animate创建动画用法实例


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery使用animate创建动画用法。分享给大家供大家参考。具体如下:

animate的用法:

animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )用于创建自定义动画的函数。

实例运行效果截图如下:

jQuery使用animate创建动画用法实例

具体代码如下:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>animate</title> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("a").toggle(function(){
   $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  },function(){
   $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
  });
});
</script> 
</head> 
<body> 
<a href="#">text</a> 
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
</body> 
</html>

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

Javascript 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
原生js实现验证码功能
Mar 16 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
numpy基础教程之np.linalg
2019/02/12 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python类继承和多态原理解析
2020/02/05 Python
postman和python mock测试过程图解
2020/02/22 Python
Django设置Postgresql的操作
2020/05/14 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
python绘图模块之利用turtle画图
2021/02/12 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python