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代码
Oct 09 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 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 GD绘制24小时柱状图
2008/06/28 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Python元组常见操作示例
2019/02/19 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
护理专业推荐信
2013/11/07 职场文书
总经理助理岗位职责
2013/11/08 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
英语商务邀请函范文
2014/01/16 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
绿色环保倡议书
2015/04/28 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
Python函数中的不定长参数相关知识总结
2021/06/24 Python