Question

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);
  }
});

Answer 1

The div is shown, but the image itself is set to display: none.