Animated jquery Strip of images

Question

I was wondering if anyone could help me animate an image on hover that actually goes through enough frames to simulate a 360 degree turn. I have the frames rendered from a 3d software. It is actually an icon that I want to rotate on mouseover & rollback on mouseout using only jquery. I can optimize it to 90 images . 90x90 Thanks

// Ive tried this but im just not sure where or how to call the images :    
$('[class$=Button]').mouseover(function() {         
    var arr = $(this).attr('class').split("Button");            
    $('div.'+arr[0]+'Content').stop(true, true).animate('');                              
});

$('[class$=Button]').mouseout(function() {    
    var arr = $(this).attr('class').split("Button");            
    $('div.'+arr[0]+'Content').stop(true, true).animate('');            
});

Answer 1

I would recommend not to use multiple images as frames for animation (take into consideration that css3 has 3d transforms, that most browsers support svg & canvas), but If you really want to do this, you could use something like this : http://jsfiddle.net/gion_13/tLkdu/ .

Answer 2

i made a lightweight jquery plugin that works very well on mobile devices and ie8+ to animate image strips.

http://timothyswt.github.io/animatinator/#/home