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技术技巧大全(五)
Jan 22 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 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中使用灵巧的体系结构
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python针对excel的操作技巧
2018/03/13 Python
详解如何设置Python环境变量?
2019/05/13 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
公司出纳岗位职责
2013/12/07 职场文书
奉献演讲稿范文
2014/05/21 职场文书
本科毕业生求职信
2014/06/15 职场文书
离婚协议书的范本
2015/01/27 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书