Forums

mikes02

I have two gear icons, and when you hover over the div I would like for them to spin, I have it working right now using the http://code.google.com/p/jqueryrotate/ code, however, I am getting some odd results, in Firefox the rotation is off center, however, in Google Chrome, Safari and IE it works better, this is the code I am using:

$(document).ready(function() 
{
	$('#how-it-works').hover(
		function()
		{
			$('#small-gear').rotate({animateTo:360,duration:1500})
			$('#large-gear').rotate({animateTo:-360,duration:1500})
		}, function()
		{
			$('#small-gear,#large-gear').rotate({animateTo:0})
		});
});

Are there any other cross-browser methods of accomplishing this? I have searched Google but I haven't had much luck.

joshuanhibbert

You can use CSS animations. Here is the browser support: http://caniuse.com/#search=CSS3 animation

If you want any help with them just let me know.

Hompimpa

You can use CSS Transition for the easiest way: http://hompimpaalaihumgambreng.blogspot.com/2011/11/berbagai-efek-transisi-pada-gambar.html

mikes02

I need cross-browser support though, specifically with IE.

Hompimpa

I do not know this is support for IE or not: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

mikes02

Doesn't work in IE.

Mottie

Try using the CSS3PIE shim for IE. And to be honest, I don't bother doing any fancy animations and stuff like that for old IE... just a plain ol' layout is enough.

mikes02

Doesn't look like PIE supports animations, I was hoping there would be a jQuery approach that would work well.

treehouse : what would you like to learn today?

Forums

360 spin image on hover?