<!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. 今天写项目时，突然发现canvas的一些公式不记得了，所以整理了一番，分享给大家。

    Canvas 标签<canvas></canvas> 默认宽300,高150,不用用Css设置宽高 获取方法var ctx = cas.getcontext("2d& ...

  2. MSSQL 分页

    使用数据库分页返回用户数据有如下好处:1.减少服务器磁盘系统地读取压力2.减少网络流量,减轻网络压力3.减轻客户端显示数据的压力4.提高处理效率. 一般而言分页处理分为两种:应用程序中的分页(查询出所 ...

  3. 如何在mac上安装docker［记录自己在mac上安装docker的经历］

    0.引子 最近入手了一台mac笔记本,想在本地安装docker. 1.找安装文档. 文档地址:http://www.widuu.com/chinese_docker/installation/mac. ...

  4. SharePoint 2013 母版页取消和HTML页关联

    前言:在新版本的SharePoint 2013上,有新的功能可以通过HTML导入母版页,然后HTML和Master页面相关联,更改HTML页的时候,Master会自动同步修改,然而,有些时候我们不需要 ...

  5. [ jquery 过滤器 hasClass(class) ] 此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类，如果有，则返回true

    此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true 实例: <!DOCTYPE html> <html lang='zh-cn'> < ...

  6. Android开发学习——android体系结构

    Android的体系结构采用了分层架构的思想, 从上层到底层共包括四层,分别是应用程序程序层.应用框架层.系统库和Android运行时和Linux内核. 一 应用程序层 该层提供一些核心应用程序包,例 ...

  7. iOS多线程之2.NSThread的加锁@synchronized

    我在上一篇文章讲了线程的生命周期,这篇文章来讲讲线程加锁的注意事项与@synchronized关键字.   那什么时候需要加锁呢,就是当多条线程同时操作一个变量时,就需要加锁了.至于为什么要加锁,可以 ...

  8. iOS 学习 - 20 UICollectionView 移动 Item ，类似背包

    有100个 item,数据源只有20个,只能在 20 个之间移动,防止 item 复用,出现 bug 方法一:苹果自带 //UICollectionViewDataSource- (BOOL)coll ...

  9. python之ATM

    每次做一点就发出来,大神不要嫌重复 2016/11/4 今天来搞ATM,反正逃不了的,说来惭愧,这个作业是我10/4号20天前拿到的,当时是万脸蒙比的,今天又做了一点,现在算是百脸蒙比吧. 一.需求: ...

  10. ORACLE OLAP错误ORA-06512: at "SYS.OLAPIHISTORYRETENTION"

    刚刚安装了ORACLE 10g R2后,启动数据库时发现告警日志有如下错误: Database Characterset is UTF8 replication_dependency_tracking ...