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+thickbox仿校内登录注册框
Jun 07 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
js对象基础实例分析
Jan 13 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
详解Layer弹出层样式
Aug 21 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
解决Vue项目中tff报错的问题
Oct 21 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下载远程图片函数 可伪造来路
2013/06/25 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python三级菜单的实例
2017/09/13 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python制作图片缩略图
2019/04/30 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
道德与公民自我评价
2015/03/09 职场文书
地道战观后感2000字
2015/06/04 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
如何在C++中调用Python
2021/05/21 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏