Skip to content

Instantly share code, notes, and snippets.

@jonraasch
Created September 2, 2010 22:42
Show Gist options
  • Save jonraasch/563097 to your computer and use it in GitHub Desktop.
Save jonraasch/563097 to your computer and use it in GitHub Desktop.
Subtle mouse effects
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Subtle Mouse Effects</title>
<style type="text/css">
.subtle {
-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
-moz-transition: background-color 500ms ease-in; /* FF3.7+ */
-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
transition: background-color 500ms ease-in; /* futureproofing */
background-color: #78776C;
color: #BBBBAD;
}
.subtle:hover, .subtle:focus {
background-color: #F6F7ED;
color: #51514A;
}
</style>
</head>
<body>
<input class="subtle" type="text" />
<textarea class="subtle"></textarea>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
// make sure to execute this on page load
$(function() {
// determine if the browser supports transition
var thisStyle = document.body.style,
supportsTransition = thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.OTransition !== undefined ||
thisStyle.transition !== undefined;
// assign jQuery transition if the browser doesn't support
if ( ! supportsTransition ) {
var defaultCSS = {
backgroundColor: '#78776C'
},
hoverCSS = {
backgroundColor: '#F6F7ED'
};
// loop through each button
$('.subtle').each(function() {
var $subtle = $(this);
// bind an event listener for mouseover and focus
$subtle.bind('mouseenter focus', function() {
$subtle.animate(hoverCSS, 500, 'swing' );
});
// bind the reverse for mouseout and blur
$subtle.bind('mouseleave blur', function(ev) {
if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false;
$subtle.animate(defaultCSS, 500, 'swing' );
});
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment