jQuery Image rollover

Question

I'm trying to display a certain image when someone hovers over a link in a navbar. I'm using a simple jQuery script but it won't work with class I need it to work with. Here is the script I am using:

<script type="text/javascript">
$(document).ready(function(){
$(".image_second").css({'opacity':'0'});
$(".image_third").css({'opacity':'0'});
$('.first').hover(
function() {
$(this).find('.image_first').animate({opacity: 1}, 100);
},
function() {
$(this).find('.image_second').fadeTo(100, 0);
},
function() {
$(this).find('.image_third').fadeTo(100, 0);
}
)
$('.second').hover(
function() {
$(this).find('.image_second').fadeTo(100, 1);
},
function() {
$(this).find('.image_first').fadeTo(100, 0);
},
function() {
$(this).find('.image_third').fadeTo(100, 0);
}
)
$('.third').hover(
function() {
$(this).find('.image_third').fadeTo(100, 1);
},
function() {
$(this).find('.image_first').fadeTo(100, 0);
},
function() {
$(this).find('.image_second').fadeTo(100, 0);
}
)
});
</script>

Ok, the navbar links are class first, second, and third. The image I want to show up when the link is hovered over is .image_first, .image_second, and .image_third. Here is the navbar code:

<ul class="second_nav">
<a href=""><li class="first">Peak Coaching</li></a>
<a href=""><li class="second">Consulting &amp; Training</li></a>
<a href=""><li class="third">Peak Adventures</li></a>
</ul>

Here is the div with the images:

<ul class="home_images">
<li><img class="image_first" src="<?php bloginfo('template_directory'); ?>/images/peak_image.jpg" alt="Peak Coaching" width="640" height="350" /></li>
<li class="image_second"><img src="<?php bloginfo('template_directory'); ?>/images/peak_image2.jpg" alt="Peak Coaching" width="640" height="350" /></li>
<li class="image_third"><img src="<?php bloginfo('template_directory'); ?>/images/peak_image3.jpg" alt="Peak Coaching" width="640" height="350" /></li>
</ul>

If I replace any of the nav classes (first, second, third) with another random div class the script will work. Unfortunately, it doesn't work with the classes I want it to work with. Any ideas?

Answer 1

You shouldn't use $(this).find(...) but should rather change it to $('#home_images')

//...
$('.first').hover(
  function() {
    $('#home_images').find('.image_first').animate({opacity: 1}, 100);
  },
  function() {
    $('#home_images').find('.image_second').fadeTo(100, 0);
  },
  function() {
    $('#home_images').find('.image_third').fadeTo(100, 0);
  }
)
//...