Take a look at this link http://dncminneapolis2012.com/new2
If you click on "two", it slides to the second page, and you see 4 boxes on the left. If you hover over the first one, it fades nicely to another image.
My question is why isn't it doing that for all of the boxes?
My html looks like this
<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_1_box">
<a href="#"><img src="images/resourceful_one.png" id="rec_1" /></a>
<div>
<a href="#"><img src="images/resourceful_one_hover.png" id="rec_1_hover" /></a>
</div>
</div>
<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_2_box">
<a href="#"><img src="images/resourceful_one.png" id="rec_2" /></a>
<div>
<a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_2_hover" /></a>
</div>
</div>
<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_3_box">
<a href="#"><img src="images/resourceful_one.png" id="rec_3" /></a>
<div>
<a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_3_hover" /></a>
</div>
</div>
<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_4_box">
<a href="#"><img src="images/resourceful_one.png" id="rec_4" /></a>
<div>
<a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_4_hover" /></a>
</div>
</div>
and my jQuery looks like this
//find the div.facts elements and hook the hover event
$('div.facts').hover(function() {
// on hover, find the element we want to fade up
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if(fade.is(':animated')) {
// ... take it's current opacity back to 1
fade.stop().fadeTo(250,1);
} else {
// fade in quickly
fade.fadeIn(250);
}
}, function() {
// on hovering out, fade the element out
var fade = $('> div', this);
if(fade.is(':animated')) {
fade.stop().fadeTo(3000,0);
} else {
//fade away slowly
fade.fadeOut(250);
}
});