2

画面上のテキストの色を変える再帰アニメーションがあります。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>

</p>

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

停止ボタンをクリックしても何も起こらず、アニメーションは続行します。

4

3 に答える 3

5

.stopの最初のパラメーターを見てください。

.stop( [クリアキュー] [, jumpToEnd] )

clearQueueキューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトは false です。

そう：

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

動作するはずです。

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

于 2012-04-26T15:00:16.660 に答える
1

まあ、あなたはトリックを行うためにフラグを使うことができます:

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-26T14:59:04.453 に答える
0

アニメーションを自己再帰的に設定する代わりに間隔を設定しても問題ありません。スクリプトを次のように変更します。

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-26T15:03:34.637 に答える