jquery - 中心からスケーリングするdivを使用した繰り返し可能なイベント

Question

このマウスオーバーイベントを繰り返し可能にするのに問題があります。つまり、マウスオーバーするたびに、新しいインスタンスがトリガーされ、完了するまで続行されます。

また、中心から拡大縮小することもできません。

これが私の実例ですhttp://jsfiddle.net/pcwuc/

Answer 1

スプライトを元の css 値に戻す必要があります。非表示になっているため、アニメーションを再実行していますが、表示されません。アニメーションのコールバックを使用して、すべてをデフォルトに戻します。

http://jsfiddle.net/pcwuc/3/

$("#header").mouseover(function() {
    $("#shine").animate({
        width: "300px",
        height: "300px",
        opacity: 0
    }, 3000, function() {
        $('#shine').css({
            width: 0,
            height: 0,
            opacity: 1,
            top: 200,
            left: 200
        });
    });
});

または、一度に複数発射できるようにしたい場合は、代わりにオリジナルのクローンを作成します。

http://jsfiddle.net/pcwuc/5/

コールバックを使用して、起動されたクローンを削除し、DOM をオーバーロードしないようにします。

$("#header").mouseover(function() {
    var $shineCopy = $("#shine").clone();
    $shineCopy.appendTo('body').animate({
        width: "300px",
        height: "300px",
        opacity: 0
    }, 3000, function() {
        $(this).remove();
    });
});​