jQuery Image Fading
There is an updated version of this post. Today I created my first jQuery function. I wanted to have all the thumbnail images in my portfolio be black and white, but fade to color when you roll your mouse over it, and I accomplished it by loading two thumbnails in the same position on the page and fading one in while fading the other out. I’ve been meaning to look into jQuery for a while now, and it is pretty straightforward and simple. If you want to use the same effect, here’s what I did. (Please let me know if you have any suggestions for improvement also).
HTML
<a class="zoom" href="large-image.jpg"><img class="off" src="bw-thumb.jpg" alt="Alt. Text" /><img class="on" src="color-thumb.jpg" alt="Alt. Text" /></a>
CSS
.zoom {
display:inline-block;
width:213px;
height:142px;
margin-top:10px;
position:relative;
}
.zoom img {
position:absolute;
top:0;
left:0;
}
.zoom + .zoom { margin-left:10px; }
JavaScript
$(document).ready(function(){
var mySpeed=750; //miliseconds
$(".zoom img.on").fadeTo(0, 0);
$(".zoom img.off").hover(function(){
$(this).fadeTo(mySpeed, 0);
},function(){
$(this).fadeTo(mySpeed, 1.0);
});
$(".zoom img.on").hover(function(){
$(this).fadeTo(mySpeed, 1.0);
},function(){
$(this).fadeTo(mySpeed, 0);
});
});
Tags: jQuery