<!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. 20145234黄斐《Java程序设计》第五周学习总结

    教材学习内容总结 第八章 异常处理 语法与继承架构 try.catch:try.catch代表错误的对象后做一些处理. 异常继承架构:错误会被包装为对象,这些对象均可抛出,因此设计错误对象都继承自ja ...

  2. mfc通过MapWinGIS控件读取shp文件（通过#import实现）

    在MFC工程中想使用MapWinGIS组件,有多种方法可以实现, 第一种方法,#Import来实现 1.首先注册MapWinGIS ActiveX组件, 2.新建一个单文档工程:MapGis,为控件添 ...

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

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

  4. QtChart 初体验

    早就知道 Qt 5.7 中引入了 QtChart 模块.一直没时间试用.周末正好空闲,就简单的试了试 QtChart.QtChart 学起来还是挺简单的,基于 Qt Graphics View Fra ...

  5. 怎么判断ThreadPool线程池里的任务都执行完毕

    在下面 链接中做方便的应该是第三种方法(他也推荐了),但是第三种方法有个小问题,就是 : WaitHandle.WaitAll(_ManualEvents); 中的_ManualEvents最大为64 ...

  6. Java：内存泄露和内存溢出

    1. 内存溢出 (Memory Overflow) 是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就 ...

  7. PyYAML学习第一篇

    1. YAML是一种交互式和可读性强的脚本语言.脚本语言都是解释性语言. PyYAML是YAML语言的编辑器和解释器.在python语言里面有PyYAML的安装包. 相关学习文档:http://pyy ...

  8. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  9. 一步一步学习JNI

    本文来自网易云社区 作者:孙有军 前言 本篇的主要目的就是JNI开发入门,使大家对JNI开发流程有一个大致的了解,后续再进行深入学习. JNI不是Android特有的,JNI是Java Native ...

  10. jieba结巴分词

    pip install jieba安装jieba模块 如果网速比较慢,可以使用豆瓣的Python源:pip install -i https://pypi.douban.com/simple/ jie ...