divを中心とする反復可能なイベント

Question

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

私もセンターからの縮尺を変更できません。

は、ここでは、元のCSS値にスプライトを設定する必要が私の作業例http://jsfiddle.net/pcwuc/

Answer 1

です。それは隠されているので、アニメーションを再実行していますが、見ることはできません。アニメーションのコールバックを使用して、すべてをデフォルトに戻す必要があります。

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