I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't work properly in that browser.
The sprite I have consists of 12 frames, each frame being 280px X 280px. My goal is to utilize jQuery to animate the sprite upon mouseover and mouseout in increments instead of smoothly sliding the background image.
Below is the code snippet I am currently using:
<div class="window"></div>
CSS:
.window {
width: 280px;
height: 280px;
background: url("http://s27.postimg.org/neu6mvztf/single_hung_door.png");
}
JS:
$(".window").hover(
function () {
$(this).animate({
'background-position-x': '0',
'background-position-y': '-3080px'
}, 1500, 'linear');
},
function () {
$(this).animate({
'background-position-x': '0',
'background-position-y': '0'
}, 1500, 'linear');
}
);
JSFiddle with sample of desired effect
Is it possible to achieve this type of animation with this approach? Thank you!