<!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. MySQL高级第四章——MySQL的锁机制

    一.概述 1.定义 锁是计算机协调多个进程或线程并发访问某一资源的限制. 2.分类 操作类型来分: 读锁(共享锁)和写锁(排它锁) 数据粒度来分: 表锁和行锁 二.三锁 1.表锁——偏读 特点: 偏向 ...

  2. 洛谷P2252 取石子游戏(威佐夫博弈)

    题目背景 无 题目描述 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后 ...

  3. TableView滑动时候出现的卡顿现象

    分析 UITableView是UIScrollView的子类,因此它可以自动响应滚动事件(一般为上下滚动).  它内部包含0到多个UITableViewCell对象,每个table cell展示各自的 ...

  4. CF 1042 E. Vasya and Magic Matrix

    E. Vasya and Magic Matrix http://codeforces.com/contest/1042/problem/E 题意: 一个n*m的矩阵,每个位置有一个元素,给定一个起点 ...

  5. LeetCode: 63. Unique Paths II（Medium）

    1. 原题链接 https://leetcode.com/problems/unique-paths-ii/description/

  6. Grafana学习

    一.安装 Grafana最新版本4.3.1安装(后端使用mysql) 二.使用

  7. android分析windowManager、window、viewGroup之间关系(二)

    三.接上一节,分析windowManager中添加一个悬浮框的方式,首先看代码 WindowManager.LayoutParams params = new LayoutParams(); para ...

  8. Ubuntu目录与权限

    Ubuntu目录 / /bin /sbin /boot /etc /mnt /home d :directory - :file b :block  磁盘以块进行 l :link Ubuntu权限 U ...

  9. Linux命令应用大词典-第3章 文本编辑器

    3.1 vi:文本编辑器 3.2 nano:编辑器 3.3 view:文办编辑器 3.4 ex:文本编辑器 3.5 ed:文本编辑器 3.6 red:文本编辑器 3.1 vi:文本编辑器 1.对文本创 ...

  10. TW实习日记：第31-32天

    不知不觉的,实习的净工作天数,已经都超过一个月了.因为对工作内容不是很满意,所以打算月底离职,也不知道是公司太缺人还是我真的能干活,领导竟然三番两次找我让我再考虑...明天又要找我了,哎...随机应变 ...