使用可從中心縮放的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(); 
    }); 
});​