jQuery图像滚动

Question

我试图显示某个图像，当有人悬停在导航栏中的链接。我正在使用一个简单的jQuery脚本，但它不适用于我需要它的类。这里是我正在使用的脚本：

<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> 

好吧，导航条链接是第一，第二和第三类。我想在链接悬停时显示的图像是.image_first，.image_second和.image_third。下面是导航栏的代码：

<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> 

这里会与图像在div：

<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> 

如果我与另一随机DIV类的脚本替换任何NAV类（第一，第二，第三）的将工作。不幸的是，它不适用于我希望它使用的类。有任何想法吗？

Answer 1

你不应该使用$(this).find(...)而应该将其更改为$('#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); 
    } 
) 
//...