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实现一些常用软件的下载导航
Aug 03 Javascript
js 操作符实例代码
Oct 24 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
js实现下一页页码效果
Mar 07 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php编程每天必学之表单验证
2016/03/01 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python变量不能以数字打头详解
2016/07/06 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
保密承诺书范文
2014/03/27 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
好媳妇事迹材料
2014/12/24 职场文书
学生犯错保证书
2015/05/09 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python