如何停止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); 
}); 

添加第二個事件捕獲的鼠標，你應該看到動畫停止。

您將不得不使用選擇器捕捉哪些對象正在動畫。我不確定按鍵是否會在span上被捕獲，或者您需要在您的特定情況下更具通用性/廣泛性。

要停止生成dream的新實例，您需要致電clearTimeout()。 Here is a great explanation如何使用。

更新：Here is a jsfiddle當涉及mouseover時，顯示一些這些想法。將鼠標懸停在動態創建的圓圈上（這就是爲什麼您必須使用on捕捉事件）才能停止當前動畫並清除創建的setTimeout。你應該能夠接受這些想法並操縱它們來產生你正在尋找的行爲。