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 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
Highcharts入门之简介
Aug 02 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
深入浅析vue组件间事件传递
Dec 29 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 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
PHP Undefined index报错的修复方法
2011/07/17 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php缓存技术详细总结
2013/08/07 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
简单的Python的curses库使用教程
2015/04/11 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
python requests库的使用
2021/01/06 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
大专学生推荐信范文
2013/11/19 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
补充协议书范本
2014/04/23 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
在职证明书模板
2015/06/15 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫