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 相关文章推荐
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
AngularJS指令用法详解
Nov 02 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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 Hash算法:Times33算法代码实例
2015/05/13 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
Git命令之分支详解
2021/03/02 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
react 父子组件之间通讯props
2018/09/08 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python字符串连接方法分析
2016/04/12 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Python生成器generator用法示例
2018/08/10 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python打造爬虫代理池过程解析
2019/08/15 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python是怎么被发明的
2020/06/15 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
2015年药店工作总结
2015/04/20 职场文书
企业投资意向书
2015/05/09 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers