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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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/27 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python避免死锁方法实例分析
2015/06/04 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
护理专科自荐书范文
2014/02/18 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
离婚协议书范本2014
2014/10/27 职场文书
今日说法观后感
2015/06/08 职场文书
PHP解决高并发问题
2021/04/01 PHP