Image Fade

Fade In/Out on MouseOver

by Robert Herring

HTML

<div class="fisher">
    <img src="http://theparafirm.com/holidayhighlights/images/fisher-color.png" alt"Fisher Films" />
</div>
<div class="clearFloat"></div>

CSS

body {
    background: #560F0B;   
}
.clearFloat { clear:both;padding-bottom:25px;}
.fisher {
	width:181px;
	height:64px;
	margin-top:5px;
	background: url('http://theparafirm.com/holidayhighlights/images/ch-fisher.png') top center no-repeat;
	float:left;
    cursor:pointer;
}

JavaScript

$(".fisher img").css({ opacity: 0 });

var isOn = 0;

$('.fisher img').hover(function () {
    $('.fisher img').stop().animate({"opacity": "1"}, "slow");
    isOn = 1;
}, function() {
    $(".fisher img").stop().animate({"opacity": "0"}, "slow");
    isOn = 0;
});