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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Python如何实现机器人聊天
2020/09/10 Python
python实现图片转字符画的完整代码
2021/02/21 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
会计的岗位职责
2014/03/15 职场文书
迎国庆横幅标语
2014/10/08 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
Mysql开启外网访问
2022/05/15 MySQL