<!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="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

      $("button:eq(0)").click(function () {

          $("#panel")

            .animate({height : "150" } , 2000)

            .animate({width : "300" } , 2000)

            .hide(2000)

            .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )

            .animate({height : "500"} , 2000 );

      });

      $("button:eq(1)").click(function () {

          $("#panel").stop();//停止当前动画，继续下一个动画，当是鼠标移动hover时 ，动画和显示不同步，显示达不到预期的结果。

      });

      $("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);//清除元素的所有动画，让当前animate动画直接到达末状态

      });

        $("button:eq(5)").click(function () {

            $("#panel").finish() //清除元素的所有动画，直接达到所有动画末状态

        }

);

})

</script>

</head>

<body>

 <button>开始一连串动画</button>

 <button>stop()</button>

 <button>stop(true)</button>

 <button>stop(false,true)</button>

 <button>stop(true,true)</button>

 <button>finish()</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 animate() stop() finish() 方法使用的更多相关文章

  1. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  2. jQuery animate动画 stop()方法详解~

    一.动画格式: 格式一:jQueryObject.animate( cssProperties, options ) 格式二:$('#id').animate( styles[, duration ] ...

  3. Jquery animate的使用方法

    js: $('#colspan').click(function () { if ($('#colspan').hasClass('glyphicon-chevron-up')) { $('#cols ...

  4. 可用于jquery animate（）方法的css属性

    * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * border ...

  5. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  6. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  7. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  8. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  9. jquery常用函数与方法

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

随机推荐

  1. 函数调用方法之__cdecl与_stdcall

    在debug VS c工程文件时,碰到cannot convert from 'int (__cdecl *)(char *)' to 'xxx'这个问题,发现问题在于typedef函数指针类型时,将 ...

  2. Multiclonal Invasion in Breast Tumors Identified by Topographic Single Cell Sequencing

    Title:  Multiclonal Invasion in Breast Tumors Identified by Topographic Single Cell Sequencing 课题的目的 ...

  3. 为什么我要放弃javaScript数据结构与算法（第九章）—— 图

    本章中,将学习另外一种非线性数据结构--图.这是学习的最后一种数据结构,后面将学习排序和搜索算法. 第九章 图 图的相关术语 图是网络结构的抽象模型.图是一组由边连接的节点(或顶点).学习图是重要的, ...

  4. 20145234黄斐《Java程序设计》第八周学习总结

    教材学习内容总结 第十五章部分 - 通用API 通用API 日志: 日志对信息安全意义重大,审计.取证.入侵检测等都会用到日志信息 日志API Logger: 注意无法使用构造方法生成Logger对象 ...

  5. 网络流Edmonds-Karp算法入门

    今天自习课没事干,看书自学了一下网络流中的EK算法.(求最大流) 设s为源点,t为汇点,C为容量矩阵,F为流量矩阵,f为最大流量. 1.初始化F,f 2.用BFS在残量网络中找到一条从s到t的最短增广 ...

  6. 创龙DSP6748开发板上电测试-第一篇

    1. 创龙DSP6748开发板测试.2980元的售价很高,我估计新的1200元比较合适,当然创龙定价是按照供需关系的.仿真器XDS100V2卖598元,真是狮子大张口. 2. 上电是5V-2A的电源. ...

  7. NB-IOT连接移动onenet平台流程

    1. 先创建账号,然后创建产品 2. 创建设备,用AT+CGSN和AT+CIMI查询NB-IOT的IMEI和IMSI填写上去. 3. 创建好的设备.

  8. 从golang的垃圾回收说起（上篇）

    本文来自网易云社区 1 垃圾回收中的重要概念 1.1 定义 In computer science, garbage collection (GC) is a form of automatic me ...

  9. 机器学习的5种“兵法"

    大数据文摘作品,欢迎个人转发朋友圈,自媒体.媒体.机构转载务必申请授权,后台留言“机构名称+转载”,申请过授权的不必再次申请,只要按约定转载即可. 作者:Jason Brownlee 译者:Clair ...

  10. uvaoj 1081510815 - Andy's First Dictionary(set应用)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=835&page= ...