Re-saturate Images on Hover
Re-saturate a dynamically desaturated image on hover using cloned images and appending js via class and not id.
HTML
<script src="http://buttonpresser.com/js/jquery.desaturate.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="sidebar_listeners_wrapper">
<h3>Who's Listening:</h3>
<div class="avatar_hugger">
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
<div class="avatar_wrapper">
<img src="http://cid-dev.co.uk/MCF-dev/wp-content/uploads/masonic-logo.jpg" class="des">
</div>
</div>
</div>
<br>
<br>
<a style="clear:both;" href="http://buttonpresser.com/user_box/" target="_blank">DEMO HERE</a>
</body>
</html>
CSS
.avatar_wrapper {
height: 60px;
width: 60px;
float:left;
margin-right:10px;
}
.des {
position: relative;
top:0;
left:0;
z-index: 10;
width:60px;
height:60px;
}
.color {
z-index: 15 !important;
position:relative;
top:-60px;
left:0;
margin-bottom:-60px;
width:60px;
height:60px;
}
JavaScript
var paircount = 0;
jQuery(function($)
{
$(".des").each(function() {
var $newthis = $(this);
$newthis.addClass("pair_" + ++paircount);
var $cloned = $newthis.clone().attr('id', '');
$cloned.insertAfter($newthis).addClass("color").hide();
$newthis.desaturate({
onswitch: function() {
}
});
$cloned.closest(".avatar_wrapper").bind("mouseenter mouseleave", desevent);
});
});
function desevent(event)
{
var classString = new String($(this).attr('class'));
var pair = classString.match(/pair_\d+/);
if (event.type == 'mouseenter')
$(".des.color", this).fadeIn(200);
if (event.type == 'mouseleave')
$(".des.color", this).fadeOut(200);
}