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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
浅谈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中的日期及时间
2006/11/23 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js读取cookie方法总结
2014/10/31 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
企业办公室主任岗位职责
2014/02/19 职场文书
党建目标管理责任书
2014/07/25 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
体育个人工作总结
2015/02/09 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书