具有从中心缩放的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();
    });
});​