Question

I’m having trouble making this mouseover event repeatable. Meaning each time you mouseover, then a new instance is triggered and continues until completed.

I’ve also be unable to make it scale from the center.

Here is my working example http://jsfiddle.net/pcwuc/

Answer 1

You have to set the sprite back to its original css values. It’s hidden, so you are rerunning animation, but you can’t see it. You want to use the animation’s callback to set everything back to the defaults.

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

​Or if you want to be able to fire multiple at once, clone the original instead.

http://jsfiddle.net/pcwuc/5/

Use the callback to remove fired off clones so that you don’t overload the DOM.

$("#header").mouseover(function() {
    var $shineCopy = $("#shine").clone();
    $shineCopy.appendTo('body').animate({
        width: "300px",
        height: "300px",
        opacity: 0
    }, 3000, function() {
        $(this).remove();
    });
});​