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浅谈之引用类型
Dec 18 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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/11/25 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP attributes()函数讲解
2019/02/03 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
python数据结构树和二叉树简介
2014/04/29 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python监控进程脚本
2018/04/12 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
公司活动策划方案
2014/01/13 职场文书
简历自荐信范文
2015/03/09 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
年终工作总结范文
2019/06/20 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
Tomcat弱口令复现及利用
2022/05/06 Servers