Skip to content

Instantly share code, notes, and snippets.

@ingozoell

ingozoell/css3-transition-jquery-fallback.html

Last active May 18, 2017 17:23
Show Gist options
  • Save ingozoell/7292642 to your computer and use it in GitHub Desktop.
Save ingozoell/7292642 to your computer and use it in GitHub Desktop.
Download ZIP
css3-transition-jquery-fallback Animate
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment