<!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. 20154327 Exp7 网络欺诈防范

    基础问题回答 (1)通常在什么场景下容易受到DNS spoof攻击. 乱连公共场合的免费WiFi容易受到攻击,比如酒店.商场的免费WiFi (2)在日常生活工作中如何防范以上两攻击方法 对于第一种,我 ...

  2. 北京Uber优步司机奖励政策（4月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 武汉Uber优步司机奖励政策（12月21日-12.27日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 单例模式之pymysql运用实例

    何为单例? 简单介绍一下下:单例是个什么鬼东西!!!! 单例模式含义] 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而 ...

  5. Habse中Rowkey的设计原则——通俗易懂篇

    Hbase的Rowkey设计原则 一. Hbase介绍 HBase -> Hadoop Database,HBase是Apache的Hadoop项目的子项目.HBase不同于一般的关系数据库,它 ...

  6. sqlite helper

    //-------------------------------------------------------------------------- // // Copyright (c) BUS ...

  7. oracle分区表按时间自动创建

    表分区是一种思想,分区表示一种技术实现.当表的大小过G的时候可以考虑进行表分区,提高查询效率,均衡IO.oracle分区表是oracle数据库提供的一种表分区的实现形式.表进行分区后,逻辑上仍然是一张 ...

  8. uvaoj 10474 - Where is the Marble?(sort+lower_bound)

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

  9. 第三模块：面向对象&网络编程基础 第1章 面向对象

    我的失败与梦想(一) 我的失败与梦想之为何创办路飞学城 01-编程范式 02-面向过程编程 03-面向对象编程介绍 04-定义类与实例化出对象 05-如何使用类 06-如何使用对象 07-属性查找与绑 ...

  10. Unity编辑器 - 使用GL绘制控件

    Unity编辑器 - 使用GL绘制控件 控件较为复杂时,可能造成界面卡顿,在EditorGUI中也可以灵活使用GL绘制来提升性能. 以绘制线段为例: using UnityEngine; using ...