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('');
});
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/ .