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的tab切换 js原理
Apr 01 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 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脚本的10个技巧(8)
2006/10/09 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript函数作用域链分析
2015/02/13 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
基于Python的关键字监控及告警
2017/07/06 Python
使用python实现ANN
2017/12/20 Python
详解Python中的type和object
2018/08/15 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
如何用python写个模板引擎
2021/01/14 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
2015年家长学校工作总结
2015/04/22 职场文书
盲山观后感
2015/06/11 职场文书
企业宣传语大全
2015/07/13 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
python turtle绘图命令及案例
2021/11/23 Python
python APScheduler执行定时任务介绍
2022/04/19 Python