在 jQuery 中停止递归动画

关键词：

【中文标题】在 jQuery 中停止递归动画【英文标题】：Stop Recursive Animation in jQuery 【发布时间】：2012-05-07 08:07:08 【问题描述】：

我有一个递归动画来使屏幕上的文本改变颜色。当 div 失去可见性时，我想要一些机制来停止这个动画。在我的实际站点中，这是在一个对话框中。我想在对话框关闭时停止所有动画。我尝试使用$.stop()，但我认为这不会在递归调用期间中断调用堆栈。

这是我正在做的事情的要点：

javascript：

function rainbow() 
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#rainbow ul li').animate(
        color: hue
    , 500, rainbow);

$(function() 
    rainbow();

    $("#stop").click(function() 

        $('#rainbow ul li').stop()

    );
);​

html

<div id="rainbow">
    <ul>
        <li>Apple</li>
        <li>Microsoft</li>
        <li>SUN</li>
    </ul>
</div>
<button id="stop" type="reset">Stop</button>

​

http://jsfiddle.net/cRar7/12/

点击停止按钮不做任何事情，动画继续。

【问题讨论】：

不要只是发布链接.. 还要提供代码以防第三方网站出现故障！ 【参考方案1】：

看看.stop的第一个参数

.stop( [clearQueue] [, jumpToEnd] )

clearQueue 一个布尔值，表示 是否也删除排队的动画。默认为 false。

所以：

$('#rainbow ul li').stop(true);

应该可以。

http://jsfiddle.net/cRar7/14/

【讨论】：

嗯，我在发布之前尝试了$('#rainbow ul li').stop(true,true);，但没有成功，但是如果我使用你发布的内容，它就可以了。 jumpToEnd 参数在处理递归时必须搞砸。我想既然没有“终点”，那就有办法去。【参考方案2】：

好吧，你可以用一个标志来做这个把戏：

var shouldStop = false;
function rainbow() 
    if(shouldStop) return;
    // rest of animation code here


$("#stop").click(function() 
    shouldStop = true;
    $('#rainbow ul li').stop();
);

这是演示：http://jsfiddle.net/cRar7/13/

【讨论】：

【参考方案3】：

如果你设置一个间隔而不是设置动画自递归，那没问题。 将您的脚本更改为：

function rainbow() 
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#rainbow ul li').animate(
        color: hue
    , 500);

$(function() 
    var ani=setInterval(rainbow,500);

    $("#stop").click(function() 

        clearInterval(ani);

    );
);

【讨论】：

jquery中停止动画stop

jQuery中停止动画stop动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止语法：.stop([clearQueue],[jumpToEnd]).stop([queue],[clearQueue],[jumpToEnd])stop还有几个可选的参数，简单来说可... 查看详情

如果动画在jQuery中停止，如何防止回调？

】如果动画在jQuery中停止，如何防止回调？【英文标题】：HowtopreventcallbackifanimationisstoppedinjQuery?【发布时间】：2011-11-1813:03:33【问题描述】：我正在开发一个包含大量可悬停div的项目。我写了一个动画来做到这一点：鼠标悬停... 查看详情

使用 jquery/javascript 停止带有动画的函数

】使用jquery/javascript停止带有动画的函数【英文标题】：stoppingafunctionwithanimationsinitwithjquery/javascript【发布时间】：2011-11-2301:52:39【问题描述】：我正在为一个网站构建一个自定义的定时图像滑块，并且我坚持一个基本原则。我... 查看详情

jquery中stop停止动画笔记

jQuerystop()方法用于停止动画或效果，在它们完成之前。stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。语法:$(selector).stop(stopAll,goToEnd);可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止... 查看详情

jQuery：停止在多次翻转时重复动画？

】jQuery：停止在多次翻转时重复动画？【英文标题】：jQuery:Stoprepeatinganimationonmultiplerollovers?【发布时间】：2012-02-2504:20:05【问题描述】：我无法停止动画...如果我滚动链接以显示一个框5次然后脱落..“显示”效果发生5次...当我... 查看详情

如果元素在视口中 - 停止滚动动画

】如果元素在视口中-停止滚动动画【英文标题】：Ifelementisinviewport-stopscrollanimation【发布时间】：2015-04-0811:40:08【问题描述】：您好，我学习了一个教程：http://css-tricks.com/slide-in-as-you-scroll-down-boxes/它工作得很好，但是，当一个... 查看详情

关于jquery自带动画效果的stop（）问题

首先先来看一下jquery中stop（）的用法stop（）用于在动画执行前停止正在执行的动画stop（stopAll,goToEnd）的两个参数为布尔值；stopAll:true/false；是否停止对象接下来所有的动画；goToEnd:true/false;停止方式是直接将动画播放到结束位... 查看详情

停止特定的 jQuery 动画

】停止特定的jQuery动画【英文标题】：StoppingspecificjQueryanimations【发布时间】：2011-06-2409:38:26【问题描述】：我在单个对象上有多个动画，我需要停止特定动画而不是所有动画。.stop()方法似乎无法做到这一点。例如，当同时为不... 查看详情

悬停时的 jQuery 动画 |非常快的传球，停止动画

】悬停时的jQuery动画|非常快的传球，停止动画【英文标题】：jQueryanimationonhover|Veryfastpass,stoptheanimation【发布时间】：2012-10-1613:31:22【问题描述】：我创建了一个非常小的jQuery插件，供个人使用，它在悬停事件时在图像顶部创建... 查看详情

是否可以在 javascript/jquery 中停止执行？

】是否可以在javascript/jquery中停止执行？【英文标题】：Isitpossibletostopexecutioninjavascript/jquery?【发布时间】：2010-10-1508:48:35【问题描述】：基本上，我希望能够将任何命令包装在$.holdTillFinished()方法中，该方法在指定的方法/jquery... 查看详情

JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

】JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法【英文标题】：ThewaytostopandcontinueanimationwhilemouseoverandmouseoutinJQuery【发布时间】：2011-07-0214:31:54【问题描述】：例如：一个简单的例子来解释：$(\'.moveDiv\').animate("margin-left":20... 查看详情

jQuery在div移出屏幕之前停止左动画

】jQuery在div移出屏幕之前停止左动画【英文标题】：jQuerystopleftanimationbeforedivmovesoffscreen【发布时间】：2013-09-1400:39:35【问题描述】：我为表单创建了一个基本滑块，一旦表单的一个部分完成，用户单击“下一步”，下一部分滑... 查看详情

如何使用 Jquery 停止所有音频播放

】如何使用Jquery停止所有音频播放【英文标题】：HowcanistopallaudioplayingusingJquery【发布时间】：2013-04-0213:24:41【问题描述】：我正在使用jquerymobile更新页面中的div以播放一些动画。动画还通过使用document.createElement(\'audio\');播放声... 查看详情

对于jquery选择器和动画效果停止动画的实战心得前端jquery框架(代码片段)

@[toc]JQuery选择器前面我展示了一些如何选择HTML元素的示例。关键是要了解jQuery选择器如何准确地选择要应用效果的元素。jQuery元素选择器和属性选择器允许按标记名、属性名或内容选择HTML元素。选择器允许操作HTML元素组或单个... 查看详情

jQuery——使用插件的公共方法停止插件内的动画

】jQuery——使用插件的公共方法停止插件内的动画【英文标题】：jQuery--stopanimationwithinpluginusingpublicmethodsofthatplugin【发布时间】：2013-02-1917:41:55【问题描述】：我正在使用extendedjQueryPluginBoilerplate编写一个插件，该插件具有启动/... 查看详情

如何在不停止递归的情况下返回递归函数中的值？

】如何在不停止递归的情况下返回递归函数中的值？【英文标题】：HowcanIreturnvaluesinarecursivefunctionwithoutstoppingtherecursion?【发布时间】：2012-03-3121:11:24【问题描述】：我有一个结构，列表中有x个列表，每个列表都有x个元组。我事... 查看详情

Jquery旋转，在mouseenter上运行，在mouseout上停止

】Jquery旋转，在mouseenter上运行，在mouseout上停止【英文标题】：Jqueryrotate,runonmouseenter,stoponmouseout【发布时间】：2012-03-1920:54:29【问题描述】：为一个必须在午餐前完成的高端客户做一些jQuery动画基本上我想要做的是在鼠标悬停... 查看详情

如何暂停所有 jQuery 动画？

】如何暂停所有jQuery动画？【英文标题】：HowcanIpausealljQueryanimations?【发布时间】：2012-03-2600:15:51【问题描述】：在某些情况下，我需要暂停页面上的所有动画以进行一些用户交互，然后在用户响应后立即恢复所有动画。例如，... 查看详情