0

I want that the animation starts when the mouse is over the sprite and the animation is gone when the mouse leaves.

I found some solutions the best was this one: Why does jQuery spritely animation plays an extra frame on second mouseenter?, but all of them would go completely glitchy if you get the mouseout before the animation is over.

That's because the "rewind" function would get 9 frames independently of when I left the mouse

I tought about the solution below, but it's not working, and I don't know why: 

$(document).ready(function(e) {

    var frame_width = $('#sprite').width();

    var play_frames = 10;
    $('#sprite').hover(function(){
            $('#sprite').sprite({fps: 10, no_of_frames: 10, play_frames: play_frames});
            play_frames = 9;
        },

    function(){
            var bg_image = $('#sprite').css('background-position');
            bg_image = bg_image.split("px"); 
            bg_image = bg_image[0]; //Gets the sprite width

            remaining_frames = ((bg_image*(-1))/frame_width); //Gets the exact frame the image has stopped at 
            console.log(remaining_frames );
            $('#sprite').sprite({fps: 10, no_of_frames: 10, play_frames: remaining_frames , rewind: true});
        }       
    );
});
Community
  • 1
  • 1
steps
  • 774
  • 2
  • 16
  • 38

1 Answers1

1

I gave up on make it work and developed my own plugin, which is called "spriteOnHover jQuery Plugin", it's great for animating sprites on hover and mouse events and have awesome parameters that do almost every trick. Of course it's open source. jQuery spriteOnHover The default usage is $('#yourSprite').spriteOnHover(); which points to $('#yourSprite').spriteOnHover({fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false;repeat:true}), there are lots of workarounds that we can do to sprite on mouse events, it's worth it, visit the page for more details, hope it helps you!

steps
  • 774
  • 2
  • 16
  • 38