<!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="http://www.cnblogs.com/../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

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

        $("#panel").animate({height:"150" }, 1000).animate({width:"300" },

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

            1000);

    });

    //stop([clearQueue][,gotoEnd]);
　　//语法结构
    $("button:eq(1)").click(function(){

        $("#panel").stop();//停止当前动画，继续下一个动画

    });

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

    });

})

</script>

</head>

<body>

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

<button>stop()</button>

<button>stop(true)</button>

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

<button>stop(true,true)</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>

文章来自：http://www.cnblogs.com/vincent_ds/archive/2012/09/23/2699048.html

jquery 停止动画 stop的几种用法的更多相关文章

  1. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  2. jQuery停止动画finish和stop函数区别

    stop()函数直接停止动画,finish()也会停止动画同时所有排队的动画的CSS属性跳转到他们的最终值. 示例代码: <html> <head> <meta char ...

  3. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  4. jQuery停止动画——stop()方法的使用

    很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

  5. jQuery停止动画和判断是否处于动画状态

    1.停止元素的动画 stop([clearQueue][,gotoEnd]); 参数clearQHCHC和gotoEnd都足町选的参数,为Boolean值(ture或flase).clearQueue ...

  6. Jquery停止动画

    stop方法 第一个参数:是否清除动画队列 true | false 第二个参数:是否跳转到动画最终效果   true | false 使用stop()方法的技巧 当下拉菜单和手风琴产生动画队列的问题 ...

  7. jQuery： on()特别的几种用法

    jQuery大家肯定用得非常的熟练了,没什么好讲的,今天为什么要写关于on这个事件绑定的API?主要还是因为看了大神的博文:web移动端浮层滚动阻止window窗体滚动JS/CSS处理;其中对于on用 ...

  8. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  9. jQuery 效果 - 停止动画

    jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. ...

随机推荐

  1. （原）3.2 Zookeeper应用 - 数据的发布与订阅

    本文为原创文章,转载请注明出处,谢谢 数据的发布与订阅 1.应用 服务端监听数据改变,客户端创建/更新节点数据,客户端提供数据,服务端处理 2.原理 客户端监控节点数据改变事件(例如配置信息,下图的c ...

  2. DatatableToJson JsonToDatatable

    using Newtonsoft.Json;using Newtonsoft.Json.Converters; /// <summary> /// 将DataTable类型转为JSON类型 ...

  3. 【小贴士】关于transitionEnd/animate的一个有趣故事

    前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用tra ...

  4. Synchronization Service Manager

    You can use this UI Shell to check the User Profile log for the SharePoint.   It's stored in this pa ...

  5. 邓白氏码的申请-iOS公司开发者账号准备

    相比较个人开发者账号的申请,公司(or企业)的账号申请要稍显复杂,很关键的一点就是邓白氏码的申请,而在网上找了好久也没有找到相对系统的方法流程.因此, 用本文记录我在公司申请邓白氏码过程,以备之后不时 ...

  6. 通用的Dialog自定义dialog

    图样:

  7. android滚动公告栏

    项目里要用到开奖公告,单行显示向上滚动的TextView,网上随便找了一个控件发现效果还不错改装一下就可以用到项目里.唯一不妥的地方就是字体大小不太好控制,不是正常的字体大小,也没有深究代码,先把工作 ...

  8. android 内存溢出与内存泄露

    内存溢出就是软件运行需要的内存,超出了java虚拟机给他分配的可用的最大内存 内存泄露就是在缓存图片文字等等的时候,没有关闭流所导致的内存泄露

  9. iOS开发之功能模块--关于自定义TabBar条

    只上项目中用到的代码: 1.实现重写TabBar的TabBarItem,然后在中间额外加一个按钮. #import <UIKit/UIKit.h> @interface BikeTabBa ...

  10. 权重最小生成树的思想与Kruskal算法

    晚上做携程的笔试题,附加题考到了权重最小生成树.OMG,就在开考之前,我还又看过一遍这内容,可因为时间太紧,也从来没有写过代码,就GG了.又吃了眼高手低的亏.这不,就好好总结一下,亡羊补牢. 权重最小 ...