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