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的图片懒加载js
Jun 30 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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下载文件名中解决乱码的问题
2013/06/20 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php树型类实例
2014/12/05 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
validator验证控件使用代码
2010/11/23 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
Node.js模块加载详解
2014/08/16 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
vue实现选中效果
2020/10/07 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python一键去抖音视频水印工具
2018/09/14 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python内置模块collections知识点总结
2019/12/19 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
投资合作协议书
2014/04/17 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
教师读书活动总结
2014/05/07 职场文书
厂区绿化方案
2014/05/08 职场文书
调任通知
2015/04/21 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python