マウスを移動したりキーを押したときにjQueryエフェクトを停止する方法

Question

マウスを動かしたりキーボードからキーを押したときにJqueryエフェクトを停止する方法は何か提案があれば分かります。

function dream(){ 
    //calculating random color of dream 
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')'; 

    //calculating random X position 
    var x = Math.floor(Math.random() * $(window).width()); 

    //calculating random Y position 
    var y = Math.floor(Math.random() * $(window).height()); 

    //creating the dream and hide 
    drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide(); 

    //appending it to body 
    $(document.body).append(drawingpix); 

    //styling dream.. filling colors.. positioning.. showing.. growing..fading 
    drawingpix.css({ 
     'background-color':color, 
     'border-radius':'100px', 
     '-moz-border-radius': '100px', 
     '-webkit-border-radius': '100px', 
     top: y-14, //offsets 
     left: x-14 //offsets 
    }).show().animate({ 
     height:'500px', 
     width:'500px', 
     'border-radius':'500px', 
     '-moz-border-radius': '500px', 
     '-webkit-border-radius': '500px', 
     opacity: 0.1, 
     top: y-250, //offsets 
     left: x-250 
    }, 3000).fadeOut(2000); 

    //Every dream's end starts a new dream 
    window.setTimeout('dream()',200); 
} 

$(document).ready(function() { 
    //calling the first dream 
    dream(); 
}); 

Answer 1

stopは、マッチした要素のアニメーションの伝播を停止すると言います。

あなたはそれを見つけ、その後、アニメーションを停止し、このようにそれにstop()を呼び出したい場合：

$("span").on("keypress", function() { 
    $(this).stop(true, true); 
}); 

マウス用の2番目のイベントのキャプチャを追加すると、アニメーションが停止表示されるはずです。

どのオブジェクトがアニメーション化されているかを正確にキャプチャするには、セレクタで再生する必要があります。 keypressがspanにキャプチャされるかどうか、または特定の状況でより一般的な/広範なものにする必要があるかどうかはわかりません。

dreamの新しいインスタンスの生成を停止するには、clearTimeout()に電話する必要があります。その使用方法についてはHere is a great explanationです。

：Here is a jsfiddlemouseoverに関するこれらのアイデアの一部を表示します。動的に作成されたサークルの上にカーソルを置くと、現在のアニメーションが停止し、作成されたsetTimeoutがクリアされます（onを使用してイベントをキャプチャする必要があります）。あなたは、これらのアイデアを取って、それらを操作して、あなたが探している振る舞いを生み出すことができるはずです。