描述: 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
.finish( [queue ] )
-
queue类型: String停止动画队列中的名称。
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（愚人码头注：就是所有动画的目标值）。所有排队的动画将被删除。
如果第一个参数提供，该字符串表示的队列中的动画将被停止。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
动画可能因为全局的$.fx.off 属性设置为 true而停止。当这样做时，所有动画方法将立即设置元素的css属性为其最终调用后的状态，而不是显示动画效果。
例子:
Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.
<!DOCTYPE html>
<html>
<head>
<style>.box {
position: absolute;
top: 10px;
left: 10px;
width: 15px;
height: 15px;
background: black;
}
#path {
height: 244px;
font-size: 70%;
border-left: 2px dashed red;
border-bottom: 2px dashed green;
border-right: 2px dashed blue;
}
button {
width: 12em;
display: block;
text-align: left;
margin: 0 auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="box"></div>
<div id="path">
<button id="go">Go</button>
<br>
<button id="bstt" class="b">.stop(true,true)</button>
<button id="bcf" class="b">.clearQueue().finish()</button>
<br>
<button id="bstf" class="b">.stop(true, false)</button>
<button id="bcs" class="b">.clearQueue().stop()</button>
<br>
<button id="bsff" class="b">.stop(false, false)</button>
<button id="bs" class="b">.stop()</button>
<br>
<button id="bsft" class="b">.stop(false, true)</button>
<br>
<button id="bf" class="b">.finish()</button>
</div>
<script>
var horiz = $("#path").width() - 20,
vert = $("#path").height() - 20;
var btns = {
bstt: function () {
$("div.box").stop(true, true);
},
bs: function () {
$("div.box").stop();
},
bsft: function () {
$("div.box").stop(false, true);
},
bf: function () {
$("div.box").finish();
},
bcf: function () {
$("div.box").clearQueue().finish();
},
bsff: function () {
$("div.box").stop(false, false);
},
bstf: function () {
$("div.box").stop(true, false);
},
bcs: function () {
$("div.box").clearQueue().stop();
}
};
$("button.b").on("click", function () {
btns[this.id]();
});
$("#go").on("click", function () {
$(".box")
.clearQueue()
.stop()
.css({
left: 10,
top: 10
})
.animate({
top: vert
}, 3000)
.animate({
left: horiz
}, 3000)
.animate({
top: 10
}, 3000);
});
</script>
</body>
</html>
相关推荐
3. **增强动画效果**：1.9版本对`.animate()`函数进行了优化，提供了更流畅的动画体验，并支持更多CSS3属性的动画。 4. **更好的DOM操作**：更新了DOM操作方法，如`.append()`、`.before()`等，使得元素插入和删除...
11.javaQueue 接口及其实现类.zip11.javaQueue 接口及其实现类.zip11.javaQueue 接口及其实现类.zip11.javaQueue 接口及其实现类.zip11.javaQueue 接口及其实现类.zip11.javaQueue 接口及其实现类.zip11.javaQueue ...
jQuery是一个强大的JavaScript库，特别以其简洁的API和丰富的动画效果而闻名。在JavaScript的世界里，jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本项目着重探讨jQuery中的动画效果，这些效果能够为...
本教程将详细讲解如何利用jQuery和CSS3技术，实现鼠标点击后的动画效果，包括图片或内容的滑动以及设置动画延迟功能。 一、jQuery基础 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和...
C语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言头文件 QUEUE.HC语言...
jQuery 动画是前端开发中的一大利器，它简化了JavaScript中复杂的动画实现，使得开发者可以快速、高效地创建出各种动态效果。本文档将深入探讨jQuery动画的相关知识，从基础到进阶，帮助你掌握这一强大的功能。 一...
这个压缩包文件“boto3-1.9.87-py2.py3-none-any.whl”是一个预编译的Python轮子文件，意味着它包含了可直接在Python环境中安装并使用的代码。它支持Python 2和Python 3，这由文件名中的"py2.py3"部分表示。"none"指...
jQuery 是一个广泛使用的JavaScript库，...通过学习和实践这些jQuery动画效果，开发者可以创建出引人入胜的网页和应用程序，提高用户的参与度和满意度。理解如何有效利用jQuery动画，是现代前端开发中不可或缺的技能。
2. `queue()`和`dequeue()`：jQuery的动画是基于队列的，`queue()`用于设置或获取动画队列，而`dequeue()`用于执行队列中的下一个动画。 二、CSS辅助动画 1. CSS3过渡（Transitions）：通过设置`transition`属性，...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理以及创建复杂的动画效果。这个“jQuery动画队列特效代码.zip”压缩包很显然是为了展示如何利用jQuery来构建富有动态性的动画效果...
4. 根据需求，可能还需要用到jQuery的延迟函数（`.delay()`)和动画队列（`.queue()`）来控制动画的顺序和时机。 总的来说，这个压缩包提供的滚动效果结合了jQuery的便利性、CSS3的动态性和HTML5的结构化，实现了...
### jQuery 1.4 动画技术：初学者指南 ...通过以上知识点的学习，初学者可以快速掌握jQuery 1.4中的动画技巧，并能够灵活应用到实际项目中。此外，还可以进一步探索更多的jQuery插件和资源，不断丰富自己的动画技能。
4. **jQuery控制动画**：在JavaScript中，使用jQuery的`.animate()`方法或者`.delay()`、`.queue()`等函数来控制云朵的运动。通过设置不同的速度和延迟，可以创建云朵飘动速度的随机性，增加真实感。 5. **重复动画...
本文将深入探讨标题为"jQuery加分动画效果示例"的知识点，以及与之相关的"changeNum"文件可能包含的内容。 jQuery的动画效果是其魅力之一，它们使网页更具动态性和用户友好性。jQuery提供了多种内置方法来创建各种...
2. **动画效果**：jQuery的`.animate()`方法可以创建平滑的CSS属性变化动画。例如，要实现图像放大效果，可以这样做： ```javascript function fadeInAndZoom() { $(this).stop().animate({ opacity: 1, // 透明...
标题中的“jquery实现png透明幻灯片效果”指的是利用JavaScript库...学习和理解这些代码可以帮助你掌握如何使用jQuery来创建具有PNG透明效果的幻灯片。记得解压文件并用浏览器预览效果，以便更好地理解和应用这些技术。
可以利用CSS3硬件加速、延迟加载图片或者使用jQuery的`.queue()`和`.dequeue()`方法来控制动画序列，确保流畅的用户体验。 总结来说，“jQuery图片排列动画效果”是一个利用jQuery库和CSS3技术创建的动态展示图片的...
5. **动画同步**：为了保证动画效果的流畅，jQuery需要协调所有参与动画的元素，确保它们按照预定顺序和速度进行。这可能需要用到`.delay()`、`.queue()`等方法。 6. **优化性能**：考虑到性能问题，可以利用CSS3的...
同时，可以使用`queue`和`delay`函数来控制动画的顺序和间隔，创建复杂的动画序列。 5. **事件监听与响应**：可以添加事件监听器，如点击事件，使得用户交互时触发特定的Banner动画。例如，当用户滚动页面或点击...