ingozoell/css3-transition-jquery-fallback.html

## css3-transition-jquery-fallback.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
	<title>HTML5</title>

<style>
/* http://www.onextrapixel.com/2011/10/17/animating-colors-using-css3-transitions-with-jquery-fallback/ */
/* shorthand notation for transition properties */
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

a.test {
display: inline-block;
background: #333;
font-size: 20px;
color: #999;
text-decoration: none;
-moz-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
transition: all 0.25s linear;
}

a.test:hover {
color: #ff0000;
background: #00ff00;
}
</style>


</head>
<body>
<a href="#" class="test" >Transition me!</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="mordenizr.min.js"></script>

<script>
Modernizr.load({
  test: Modernizr.csstransitions,
  yep : '',
  nope: 'http://code.jquery.com/color/jquery.color-2.1.2.min.js' //jquery.color.js for color animations
});

if (!Modernizr.csstransitions) {
    $(document).ready(function(){
	    $(".test").hover(function () { /* .on("mouseover", function () { */
	        $(this).stop().animate({ color: "#999", backgroundColor: "#333" },700)
	    }, function() {
	        $(this).stop().animate({ color: "#ff0000", backgroundColor: "#00ff00" },700)
		   }
		);
	});
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<title>HTML5</title>

	<style>
	/* http://www.onextrapixel.com/2011/10/17/animating-colors-using-css3-transitions-with-jquery-fallback/ */
	/* shorthand notation for transition properties */
	/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

	a.test {
	display: inline-block;
	background: #333;
	font-size: 20px;
	color: #999;
	text-decoration: none;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	transition: all 0.25s linear;
	}

	a.test:hover {
	color: #ff0000;
	background: #00ff00;
	}
	</style>


	</head>
	<body>
	<a href="#" class="test" >Transition me!</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="mordenizr.min.js"></script>

	<script>
	Modernizr.load({
	test: Modernizr.csstransitions,
	yep : '',
	nope: 'http://code.jquery.com/color/jquery.color-2.1.2.min.js' //jquery.color.js for color animations
	});

	if (!Modernizr.csstransitions) {
	$(document).ready(function(){
	$(".test").hover(function () { /* .on("mouseover", function () { */
	$(this).stop().animate({ color: "#999", backgroundColor: "#333" },700)
	}, function() {
	$(this).stop().animate({ color: "#ff0000", backgroundColor: "#00ff00" },700)
	}
	);
	});
	}
	</script>
	</body>
	</html>