reverse sprite animation on mouseout

Question

I have a sprite animation that I would like to play when the mouse hovers over the object and then play in reverse and stop on the first frame whenever the mouse leaves the object.

This is what I have for the mouse enter animation:

$("#banner").mouseenter(function(){ $('#bannerstache').sprite({fps: 200, no_of_frames: 34,   play_frames:34}); });

Basically, when you hover over the banner, a mustache "grows" until it's completed at frame 34. (Whereas, on frame 1, there is no mustache.)

I want this mustache to play in reverse and go back to frame 1 whenever the mouse leaves the hovered state.

The problem is, I've tried a few methods of reversing the playback, but it doesn't always reverse back to the first frame.

How can I achieve this?

Thank you so much if you're able to provide some input!

If you can provide me with a fiddle including an example sprite I can better integrate my answer with your use case. — Zeb Rawnsley, Dec 12 '12 at 11:39

Zeb Rawnsley · Accepted Answer · 2012-12-12T11:40:08.130

here's something I whipped up from your problem description

HTML:

<div id="div1" class="testContainer"></div>

CSS:

.testContainer {height:100px;width:150px;background-color:#CCC;text-align:center;font-size:90px}

JavaScript:

// arrSprite would be an array of images
// each index represents a frame in your sprite
// for the purposes of this test i'll create an array of integers
var arrSprite1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// $div1 is a container within which we'll place our animation
var $div1 = $('#div1');

// create a new SpritePlayer() to handle our animation
var player = new SpritePlayer($div1, arrSprite1, 100);

// set the hover in/out event handler of our container.
$div1.hover(player.forward, player.reverse);

function SpritePlayer($container, arrSprite, speed) {
    var int, cur = 0, min = 0, max = arrSprite.length;

    // give $container the first frame in our sprite (arrSprite)
    $container.html(getFrame(min));

    return {
        forward: function () { playSprite(true); },
        reverse: function () { playSprite(false); }
    };

    function getFrame(i) { return arrSprite[i]; }

    function playSprite(forward) {
        var limit = forward ? max : min;

        clearInterval(int); int = setInterval(function() {
            $container.html(getFrame(forward ? ++cur : --cur));
            cur === limit && clearInterval(int); 
        }, speed);
    }
};

Live Demo

reverse sprite animation on mouseout

1 Answers1