JQuery动画和停止动画实例代码


Posted in Javascript onMarch 01, 2013
<!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>Panel</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 src="http://www.cnblogs.com/../scripts/jquery-1.3.1.js" type="text/javascript"></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);
  });

  //stop([clearQueue][,gotoEnd]);
//语法结构

  $("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 代码的方法小结
Jul 16 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
React中的render何时执行过程
Apr 13 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 #Javascript
DWZ table的原生分页浅谈
Mar 01 #Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 #Javascript
循环 vs 递归浅谈
Feb 28 #Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 #Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
使用PHP Socket写的POP3类
2013/10/30 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
利用JS实现数字增长
2016/07/28 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python实现逻辑回归的示例
2020/10/09 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
财务人员担保书
2014/05/13 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年采购工作总结
2014/11/20 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
为什么RedisCluster设计成16384个槽
2021/09/25 Redis