<!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. [Real World Haskell翻译]第27章 网络通信和系统日志 Sockets and Syslog

    第27章 网络通信和系统日志 Sockets and Syslog 基础网络 在本书的前面几章,我们讨论了运转在网络上的服务.其中的两个例子是客户端/服务器架构的数据库和Web服务.当需要制定一个新的 ...

  2. See You Again——我最后的汇编程序

    汇编语言:课程设计2 前言 由于本人水平不够,这里的课程设计2的程序实现并没有像王爽书中所说的那样可以不依赖于操作系统运行. 这里的程序依然要在dos下运行,而且没有实现引导现有操作系统的功能. 该程 ...

  3. mavn打外部配置jar包依赖

    https://blog.csdn.net/pei19890521/article/details/80984707

  4. Mac安装php和redis扩展

    Mac上有特定的包管理工具homebrew,也叫brew,这里的php安装用的就是brew 1安装php brew install php@7.0. brw安装会自动管理依赖,所以不用你一个个先安装依 ...

  5. docker 应用场景

    内容来自知乎.先mark,后续再研究 0.无痛尝试新事物 这应该是最早让我感受到docker的便利性的使用场景了. 以前,如果想尝试新的编程语言/数据库/命令行工具,会先找找apt的源里有没有相应的包 ...

  6. win 下通过dos命令格式化磁盘

    该命令可以解决好多问题,比如: 1.u盘作为启动后,如何恢复成正常的u盘 1.win + r ->cmd 进入dos模式 2.输入diskpart后回车,点击确定,进入diskpart命令的交互 ...

  7. 孤荷凌寒自学python第八十一天学习爬取图片1

    孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...

  8. priority_queue(优先队列)：排序不去重

    C++优先队列类似队列,但是在这个数据结构中的元素按照一定的断言排列有序. 头文件:#include<queue> 参数:priority_queue<Type, Container ...

  9. 3.hadoop完全分布式搭建

    3.Hadoop完全分布式搭建 1.完全分布式搭建 配置 #cd /soft/hadoop/etc/ #mv hadoop local #cp -r local full #ln -s full ha ...

  10. Python运行的方式

    Python的运行方式多种多样,下面列举几种: 交互式 在命令行中输入python,然后在>>>提示符后面输入Python语句,这里需要注意: 1 语句前面不能有空格,否则会报错 2 ...