从文本链接显示Javascript图像淡入效果

我有一个简单的菜单，根据鼠标光标悬停在哪个链接上，它会显示不同的图像。 现在我想让出现的图像淡入，这样看起来会更好，但我还不太熟悉Javascript，所以我想知道是否有人能帮我

以下是我目前的代码：

Javascript:

if (document.images) {


image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image
image6 = new Image
image7 = new Image
image8 = new Image
image9 = new Image
image10 = new Image


image1.src = "imgs/Categories/1.jpg" 
image2.src = "imgs/Categories/2.jpg"
image3.src = "imgs/Categories/3.jpg"
image4.src = "imgs/Categories/4.jpg"
image5.src = "imgs/Categories/5.jpg"
image6.src = "imgs/Categories/6.jpg"
image7.src = "imgs/Categories/7.jpg"
image8.src = "imgs/Categories/8.jpg"
image9.src = "imgs/Categories/9.jpg"
image10.src = "imgs/Categories/10.jpg"

}

以下是HTML：

<ul class="menu">
          <li><a href="#" onMouseover="document.imagename.src=image1.src",  onMouseout="document.imagename.src=image10.src">Link 1</a></li>
          <li ><a href="#" onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image10.src">Link 2 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image12.src">Link 3 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image10.src"> Link 4 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image10.src">Link 5 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image10.src">Link 6 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image7.src" onMouseout="document.imagename.src=image12.src">Link 7 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image8.src" onMouseout="document.imagename.src=image10.src">Link 8 </a></li>
          <li><a href="#" onMouseover="document.imagename.src=image9.src" onMouseout="document.imagename.src=image10.src">Link 9</a>
          </li>
          </ul>

谢谢！

---

Nuno

您可以为此使用jQuery fadein和jQuery fadeout

以下是一个例子：

javascript部分看起来有点像这样：

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>

$（文档）.ready（函数（）{
$（#picOne'）.fadeIn（1500）、delay（3500）、fadeOut（1500）；
美元("picTwo"),延迟(5000),法代因(1500),；
});

我将从html中提取所有javascript并使用jquery

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $('.menu li').mouseover(function() {
       whichItem = $(this).index();
       $('body').animate({ background-image: 'url(imgs/Categories/'+whichItem+'.jpg)' }, "slow");
    });
</script>

$（'.menu li'）.mouseover（函数（）{
whichItem=$（this.index（）；
$（'body'）.animate（{background image:'url（imgs/Categories/'+whichItem+'.jpg）}，“slow”）；
});

HTML

...      

你是怎么做到的？这些解决方案有帮助吗？你是怎么解决这个问题的？

 <ul class="menu">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
         <li><a href="#">Link 4</a></li>
          ...      
   </ul>