在jQuery中停止遞歸動畫

我有一個遞歸動畫來使屏幕上的文本改變顏色。我想要一些機制來停止這個動畫，當div放寬能見度時。在我的實際站點中，這是在一個對話框中。當對話框關閉時，我想停止所有的動畫。我嘗試使用$.stop()，但我認爲這不會在遞歸調用期間中斷調用堆棧。在jQuery中停止遞歸動畫

下面是我在做什麼要點：

的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/

單擊「停止」按鈕不會執行任何操作，動畫將繼續。

來源

2012-04-26 arb

不只是發佈鏈接..提供代碼以及incase第三方網站宕機！ – rlemon 2012-04-26 15:01:20

看一看的第一個參數.stop

.stop（ [clearQueue] [，jumpToEnd]）

clearQueue布爾值，指示是否也刪除排隊的動畫。默認爲false。

所以：

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

應該工作。

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

來源

2012-04-26 15:00:16 Yoshi

嗯我試過'$（'＃rainbow ul li'）。stop（true，true）;'發貼之前並沒有工作，但是如果我使用你發佈它的話。在處理遞歸時，'jumpToEnd'參數必須搞砸了。我想因爲沒有「結束」，所以要去它。 – arb 2012-04-26 15:30:48

好，你可以使用一個標誌，這樣的伎倆：

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/

來源

2012-04-26 14:59:04

如果你設置的時間間隔，而不是設置動畫自遞歸這是沒有問題的。將您的腳本更改爲：

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); 

    }); 
});

來源

2012-04-26 15:03:34

在jQuery中停止遞歸動畫

回答

相關問題