jQuery实现连续动画效果实例分析


Posted in Javascript onOctober 09, 2015

本文实例讲述了jQuery实现连续动画效果的方法。分享给大家供大家参考。具体如下:

这里介绍jQuery实现一连串的连续动画效果,将这些动画运用先设置好,然后在jQuery的作用下完成一个接一个的动画,这在网页游戏编写中是个基础但重要的动画生成技巧,对于前台设计来说也是有必要掌握的。

运行效果截图如下:

jQuery实现连续动画效果实例分析

在线演示地址如下:

具体代码如下:

<!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>jQuery实现连续的动画效果</title>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
  $("button:eq(0)").click(function () {
   $("#panel")
   .animate({height : "150" } , 1000 )
   .animate({width : "300" } , 1000 )
   .hide(2000)
   .animate({height : "show" , width : "show" , opacity : "show" } , 1000 )
   .animate({height : "500"} , 1000 );
  });
  $("button:eq(1)").click(function () {
   $("#panel").stop();//停止当前动画,继续下一个动画
  });
  $("button:eq(2)").click(function () {
   $("#panel").stop(true);//清除元素的所有动画
  });
  $("button:eq(3)").click(function () {
   $("#panel").stop(false,true);//让当前动画直接到达末状态 ,继续下一个动画
  });
  $("button:eq(4)").click(function () {
   $("#panel").stop(true,true);//清除元素的所有动画,让当前动画直接到达末状态 
  });
})
</script>
</head>
<body>
 <button>开始一连串动画</button>
 <button>stop()</button>
 <button>stop(true)</button>
 <button>stop(false,true)</button>
 <button>stop(true,true)</button>
<div id="panel">
 <h5 class="head">什么是jQuery?</h5>
 <div class="content">
  jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 #Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 #Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
晚会邀请函范文
2014/01/24 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
警察群众路线整改措施
2014/09/26 职场文书
高中生旷课检讨书
2014/10/08 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA