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 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
德生S2000电路分析
2021/03/02 无线电
我的论坛源代码(三)
2006/10/09 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
python如何实现反向迭代
2018/03/20 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Django数据库操作之save与update的使用
2020/04/01 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
2019年.net常见面试问题
2012/02/12 面试题
2013的个人自我评价
2013/12/26 职场文书
卫生安全检查制度
2014/02/04 职场文书
化工工艺设计求职信
2014/06/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
答辩状格式范本
2015/05/22 职场文书