Scalable fading content on hover, with stops

by orrinward

HTML

<div class="fadercontainer">
    <div class="content">Content1</div>    
    <img src="http://2.bp.blogspot.com/_bpMgKpXKabQ/TKMrEZGoOLI/AAAAAAAAARQ/JNp1BmVlEB4/s1600/Monkey-Mia-MJK-Australia.jpg" />
</div>
<div class="fadercontainer">
    <div class="content">Content2</div>    
    <img src="http://thatwritingchic.files.wordpress.com/2011/05/money.jpg" />
</div>
<div class="fadercontainer">
    <div class="content">Content3</div>    
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/7b/Donkey_1_arp_750px.jpg" />
</div>
<div class="fadercontainer">
    <div class="content">Content4</div>    
    <img src="http://www.towability.com/images/content/pages/dinky-donuts-large.jpg" />
</div>

CSS

.fadercontainer {width:300px;height:100px;overflow:hidden;background:#333333;color:#FFFFFF;position:relative;}
.fadercontainer img{position:absolute;top:0;left:0;}
.fadercontainer .content{padding:20px;}

JavaScript

fadespeed = 800;

$('.fadercontainer').hover(   
function() {
    //This fades from default opacity to 50%
    $(this).children('img').stop().fadeTo(fadespeed, 0.2);
    $('.fadercontainer').not(this).stop().fadeTo(fadespeed, 0.2);
}, function() {
    //This fades from hovered opacity (50%) back to 100%
    $('.fadercontainer').not(this).children('img').stop().fadeTo(fadespeed, 1);
    $('.fadercontainer').not(this).stop().fadeTo(fadespeed, 1);
});