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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
Vue性能优化的方法
Jul 30 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基础知识:类与对象(5) static
2006/12/13 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
javascript 数组排序函数
2009/08/20 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
中级会计职业生涯规划书
2014/03/01 职场文书
销售会计岗位职责
2014/03/15 职场文书
导游个人求职信范文
2014/03/23 职场文书
校外活动方案
2014/08/28 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技