jQuery 效果 - stop() 方法

定义和用法
stop() 方法停止当前正在运行的动画。

语法

$(selector).stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--  引入你的 jq 文件  --><script src="../../jq/jquery-2.js"></script><style>*{margin:0;padding:0;}#panl{width:60px;height:22px;overflow: hidden;margin:10px 0 0 10px;border:1px solid black;}.head{width:300px;height:30px;line-height:30px;border:1px solid greenyellow;background-color:fuchsia;padding-left:8px;}.content{padding-left:8px;text-indent:2em;border-top:1px solid #0050D0;}</style>
</head>
<body><script>$(function () {$("button:eq(0)").click(function(){$("#panl").animate({height:'150px'},1000).animate({width:'300px'},1000).hide(2000).animate({height:'show',width:'show',opacity:'show'},1000).animate({height:'500px'},2000)});$("button:eq(1)").click(function(){$('#panl').stop(); //停止当前动画，持续下一个动画})$("button:eq(2)").click(function(){$('#panl').stop(true); //消除元素的所有动画（立即停止）})$("button:eq(3)").click(function(){$('#panl').stop(false,true); // 当前动画直接到末尾状态，继续下一个 })$("button:eq(4)").click(function(){$('#panl').stop(true,true); // 清楚所有动画，让当前动画直接到达末尾状态 })});</script><button>开始一系列动画</button><button>stop()</button><button>stop(true)</button><button>stop(false,true)</button><button>stop(true,true)</button><div id="panl"><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 效果 - stop() 方法相关推荐

jQuery 效果 - animate() 方法
实例改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...
jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法
slideDown() 方法定义和用法 slideDown() 方法通过使用滑动效果,显示隐藏的被选元素. 语法 $(selector).slideDown(speed,callback) 参数描 ...
jQuery 效果 - fadeTo() 方法
语法示例: $('.btn').click(function () {$(this).fadeTo(1000, .4) }) 参数一:毫秒数:(1000 = 1秒) 参数二:透明度:
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
miniui mysql_MiniUi系列 jQuery 事件 - delegate() 方法
当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click",function(){ $(&q ...
html用jq设置动态效果,jQuery实现基本动画效果的方法详解
本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画语法: $(selector).animate({params},spee ...
玩转Jquery中的动画效果(animate方法)
jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法: $(selector).animate({params},speed,callba ...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元 ...
从任意网页上摘取酷炫Jquery效果为自己使用的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 用的chrome 浏览器 2. 随意百度一个漂亮的jquery效果比如我找到一个可以旋转的 ...

jQuery 效果 - stop() 方法

jQuery 效果 - stop() 方法相关推荐

最新文章

热门文章