CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
user13286
user13286

Reputation: 3075

Animating an image sprite using jQuery Animate in steps?

I am attempting to code an image sprite using jQuery and am wondering if it's possible to animate in steps instead of linear. Basically, I attempted using CSS3 animations, but IE9 is a requirement and I could not get the CSS3 animations to function correctly in IE.

I have a sprite which has 12 frames, each frame being 280px X 280px. I would like to use jQuery to animate the sprite on mouseover and mouseout in steps instead of sliding the background image in a linear fashion.

Here is my current code:

<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

Would it be possible to accomplish this in this way? Thanks!

Upvotes: 1

Views: 2525

Answers (3)

blex
blex

Reputation: 25634

Keeping your code structure, I created a .animateSteps() function:

$(".window").hover(
    function () {
        $(".window").animateSteps(280,-280,20);
    },
    function () {
        $(".window").animateSteps(3080,280,20);
    }
);


$.fn.animateSteps = function(final,step,duration) {
    if(typeof t != "undefined") clearTimeout(t);
    var self = $(this);
    if(parseInt(self.css('background-position-y'))==final) return;
    self.css('background-position-y', '+='+step+'px');
    t=setTimeout(function(){self.animateSteps(final,step,duration);},duration);
}

It takes 3 parameters:

  • final: the final position in pixels

  • step : the number of pixels to increment at each step

  • duration : the duration between 2 iterations

JS Fiddle Demo

Upvotes: 1

Bradley Bossard
Bradley Bossard

Reputation: 2519

It isn't the most elegant code, but basically, I think you need an animating loop running continuously that only shifts the frame animation by one frame every x milliseconds. The fiddle you had continuously animates the whole strip in a linear fashion. Forked jsFiddle link below.

var currentY = 0;
var isAnimating = false;
var $window = $('.window');
var windowWidth = 280;
var frameRateMs = 60;

function updateWindow() {
    if (isAnimating) {
        $window.css({'background-position-y': currentY + 'px'});
        currentY -= windowWidth;
        if (currentY == -3080) {
            windowWidth = -280;
        } else if (currentY == 0) {
            windowWidth = 280;
        }
    }
    setTimeout(updateWindow, frameRateMs);
}

$window.hover(function() {
    isAnimating = true;
}, function() {
    isAnimating = false;
});

updateWindow();

http://jsfiddle.net/64nu4h4w/10/

Upvotes: 2

Kedume
Kedume

Reputation: 335

You can do this with a libray named velocity.js You can see how to do that here: http://css-tricks.com/clever-uses-step-easing/

Upvotes: 3

Related Questions