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