CODEWITHSUNDEEP
jqueryjquery-animate
Gerico
Gerico

Reputation: 5169

jQuery animate sprite on hover

I'm just trying to work out if I could achieve something where I have a paint mark, that currently is used as a background image below a nav list item.

Is it possible to animate a secondary div that's overlapped at the bottom of the li that creates a reveal effect on the background image so that it looks as if the image is appear from left to right, until the line is fully shown? Sort of like a growing image as you hover.

Upvotes: 1

Views: 1865

Answers (2)

steps
steps

Reputation: 804

You could also give a try to mine SpriteOnHover jquery plugin.

It has some parameters you could work with and it's lightweight so it's maybe worth it. You can get it here http://apolinariopassos.com.br/dev/sprite-on-hover-jquery-plugin/

The usage is $('#yourSprite').spriteOnHover(); This will make the plugin work this the default parameters, which points to this:

$('#yourSprite').spriteOnHover({fps:30, orientation:"horizontal", rewind: true, loop: false, autostart:false;repeat:true})

Upvotes: 1

philipobenito
philipobenito

Reputation: 692

You can animate the background-position-x and background-position-y properties with jQuery.

I don't have any code from you to show you but here is an example.

$('#element-to-animate').animate({
    'background-position-x': '10%',
    'background-position-y': '20%'
}, 1500, 'linear');

Upvotes: 0

Related Questions