-2

当我移动鼠标或按键盘上的键时如何停止 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();
});
4

1 回答 1

3

stop表示它停止在匹配元素上传播动画。

如果你想停止动画然后找到它并stop()像这样调用它：

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

为鼠标添加第二个事件捕获，您应该会看到动画停止。

您将不得不使用选择器来准确捕捉正在动画的对象。我不确定按键是否会被捕获，span或者您是否需要在特定情况下更通用/更广泛。

要停止生成 的新实例dream，您需要调用clearTimeout(). 这是如何使用它的一个很好的解释。

更新：这是一个 jsfiddle，它在涉及时显示其中一些想法mouseover。将鼠标悬停在动态创建的圆圈上（这就是您必须使用 捕获事件的原因on）将停止当前动画并清除创建的 setTimeout。您应该能够接受这些想法并操纵它们以产生您正在寻找的行为。

于 2012-05-10T12:47:03.947 回答