-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);
});

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

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

の新しいインスタンスの生成を停止するにはdream、 を呼び出す必要がありますclearTimeout()。これがどのように使用されるかについての素晴らしい説明です。

更新:これは、関連する場合にこれらのアイデアのいくつかを表示する jsfiddlemouseoverです。動的に作成された円にカーソルを合わせると (これが を使用してイベントをキャプチャする必要がある理由ですon)、現在のアニメーションが停止し、作成された setTimeout がクリアされます。これらのアイデアを取り入れて操作し、探している動作を生成できる必要があります。

于 2012-05-10T12:47:03.947 に答える