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代码
Mar 06 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
vue滑动吸顶及锚点定位的示例代码
May 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php join函数应用
2011/05/04 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript模拟push
2016/03/06 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
pandas的qcut()方法详解
2019/07/06 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
九年级政治教学反思
2014/02/06 职场文书
喝酒检查书范文
2014/02/23 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
学生党员检讨书范文
2014/12/27 职场文书
档案管理员岗位职责
2015/02/12 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年教师国培感言
2015/08/01 职场文书
服务行业标语口号
2015/12/26 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫