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下用层来实现select的title提示属性
Feb 23 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
JavaScript 下载svg图片为png格式
Jun 21 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php解析xml方法实例详解
2015/05/12 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
运动会邀请函范文
2014/01/31 职场文书
益达广告词
2014/03/14 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
党员自我评价2015
2015/03/03 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android