2

サイト用のカスタムタイミング画像スライダーを作成していて、基本原則に固執しています。ページロードで開始する再帰関数があります。関数をすぐに停止し、最初にonclickで再起動する方法を考えています。

次のjsfiddleの例では、「青」または「緑」ボタンがクリックされたときに、赤の広場をマージン0から開始し、bounce()関数を再開する方法を教えてもらえますか?

たとえば、赤い四角が右向きの場合、「青」をクリックしたときに、四角を「margin-left:0」に表示してから、bounce()関数を再開するにはどうすればよいですか?

本当にありがとう。 http://jsfiddle.net/hZ6xZ/7/

4

2 に答える 2

2

簡単です。jQueryには、アニメーションを停止するstop()という名前の関数があります。また、アニメーションの最後へのジャンプとキューのクリアもサポートしています。

次のようにバウンス関数を作成するだけです。

var repeat;

function bounce(){
     $('.box')
         .stop()
         .css({'margin-left':'0px'})
         .animate({'margin-left':'100px'})
         .animate({'margin-left':'0px'});

     repeat = setTimeout(function() { bounce(); }, 2000);
}

停止の詳細については、http://api.jquery.com/stop/をご覧ください。

于 2011-09-22T18:10:01.310 に答える
2

フィドル-http://jsfiddle.net/mrtsherman/hZ6xZ/9/

jQueryのstop()を使用して、現在のアニメーションを強制終了します。また、$('#box')を何度も呼び出すよりも効率的なメソッドチェーンについても調べてください。

$('#blue').click(function(){
    repeat = clearTimeout(repeat);
    $('.box')
        .stop()
        .css({'background-color':'blue'})
        .css({'margin-left':'0'});

    bounce();
});
于 2011-09-22T18:09:22.230 に答える