Javascript 尝试压缩当鼠标悬停在文本上时淡入淡出图像过渡的脚本

我是Jquery新手，它非常棒，但我正在努力压缩我编写的一些超级业余代码。基本上，当一段文本悬停在上面时，我需要能够在同一位置使一系列堆叠的图像淡入。应该很简单，你能提供的帮助会很好

以下是网站的现状：

这是我目前的代码。它的长度有点傻，但我仍在学习：

<script>
$(document).ready(function(){
                $("#link1a").hover(function()
                {
                    $("#img1a").css("z-index", "100");
                    $("#img1a").css('opacity', '0').fadeTo(250, 1.0);

                }, function()
                {
                    $("#img1a").css("z-index", "10");
                    $("#img1a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link1b").hover(function()
                {
                    $("#img1b").css("z-index", "100");
                    $("#img1b").css('opacity', '0').fadeTo(250, 1.0);

                }, function()
                {
                    $("#img1b").css("z-index", "10");
                    $("#img1b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link1c").hover(function()
                {
                    $("#img1c").css("z-index", "100");
                    $("#img1c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img1c").css("z-index", "10");
                    $("#img1c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link1d").hover(function()
                {
                    $("#img1d").css("z-index", "100");
                    $("#img1d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img1d").css("z-index", "10");
                    $("#img1d").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link1e").hover(function()
                {
                    $("#img1e").css("z-index", "100");
                    $("#img1e").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img1e").css("z-index", "10");
                    $("#img1e").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link1f").hover(function()
                {
                    $("#img1f").css("z-index", "100");
                    $("#img1f").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img1f").css("z-index", "10");
                    $("#img1f").css('opacity', '1').fadeTo(250, 0);
                });

                $("#link2a").hover(function()
                {
                    $("#img2a").css("z-index", "100");
                    $("#img2a").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img2a").css("z-index", "10");
                    $("#img2a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link2b").hover(function()
                {
                    $("#img2b").css("z-index", "100");
                    $("#img2b").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img2b").css("z-index", "10");
                    $("#img2b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link2c").hover(function()
                {
                    $("#img2c").css("z-index", "100");
                    $("#img2c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img2c").css("z-index", "10");
                    $("#img2c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link2d").hover(function()
                {
                    $("#img2d").css("z-index", "100");
                    $("#img2d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img2d").css("z-index", "10");
                    $("#img2d").css('opacity', '1').fadeTo(250, 0);
                });

                $("#link3a").hover(function()
                {
                    $("#img3a").css("z-index", "100");
                    $("#img3a").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img3a").css("z-index", "10");
                    $("#img3a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link3b").hover(function()
                {
                    $("#img3b").css("z-index", "100");
                    $("#img3b").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img3b").css("z-index", "10");
                    $("#img3b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link3c").hover(function()
                {
                    $("#img3c").css("z-index", "100");
                    $("#img3c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img3c").css("z-index", "10");
                    $("#img3c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link3d").hover(function()
                {
                    $("#img3d").css("z-index", "100");
                    $("#img3d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img3d").css("z-index", "10");
                    $("#img3d").css('opacity', '1').fadeTo(250, 0);
                });

                $("#link4a").hover(function()
                {
                    $("#img4a").css("z-index", "100");
                    $("#img4a").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img4a").css("z-index", "10");
                    $("#img4a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link4b").hover(function()
                {
                    $("#img4b").css("z-index", "100");
                    $("#img4b").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img4b").css("z-index", "10");
                    $("#img4b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link4c").hover(function()
                {
                    $("#img4c").css("z-index", "100");
                    $("#img4c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img4c").css("z-index", "10");
                    $("#img4c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link4d").hover(function()
                {
                    $("#img4d").css("z-index", "100");
                    $("#img4d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img4d").css("z-index", "10");
                    $("#img4d").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link4e").hover(function()
                {
                    $("#img4e").css("z-index", "100");
                    $("#img4e").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img4e").css("z-index", "10");
                    $("#img4e").css('opacity', '1').fadeTo(250, 0);
                });

                $("#link5a").hover(function()
                {
                    $("#img5a").css("z-index", "100");
                    $("#img5a").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img5a").css("z-index", "10");
                    $("#img5a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link5b").hover(function()
                {
                    $("#img5b").css("z-index", "100");
                    $("#img5b").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img5b").css("z-index", "10");
                    $("#img5b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link5c").hover(function()
                {
                    $("#img5c").css("z-index", "100");
                    $("#img5c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img5c").css("z-index", "10");
                    $("#img5c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link5d").hover(function()
                {
                    $("#img5d").css("z-index", "100");
                    $("#img5d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img5d").css("z-index", "10");
                    $("#img5d").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link5e").hover(function()
                {
                    $("#img5e").css("z-index", "100");
                    $("#img5e").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img5e").css("z-index", "10");
                    $("#img5e").css('opacity', '1').fadeTo(250, 0);
                });

                $("#link6a").hover(function()
                {
                    $("#img6a").css("z-index", "100");
                    $("#img6a").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img6a").css("z-index", "10");
                    $("#img6a").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link6b").hover(function()
                {
                    $("#img6b").css("z-index", "100");
                    $("#img6b").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img6b").css("z-index", "10");
                    $("#img6b").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link6c").hover(function()
                {
                    $("#img6c").css("z-index", "100");
                    $("#img6c").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img6c").css("z-index", "10");
                    $("#img6c").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link6d").hover(function()
                {
                    $("#img6d").css("z-index", "100");
                    $("#img6d").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img6d").css("z-index", "10");
                    $("#img6d").css('opacity', '1').fadeTo(250, 0);
                });
                $("#link6e").hover(function()
                {
                    $("#img6e").css("z-index", "100");
                    $("#img6e").css('opacity', '0').fadeTo(250, 1.0);
                }, function()
                {
                    $("#img6e").css("z-index", "10");
                    $("#img6e").css('opacity', '1').fadeTo(250, 0);
                });

            });
</script>

---

看来我已经知道怎么做了：

<script type="text/javascript">
$(document).ready(function(){
var hoverMan = 'link0a';
var endBit = 'poop';
var newBit = 'boob';
var imageMan = 'img0a';

$('.pagelink').mouseover(function() {
   hoverMan = (this.id);
   endBit = hoverMan.substring(4,6);
   imageMan = 'img' + endBit;
   $('#' + imageMan).css("z-index", "100");
   $('#' + imageMan).css('opacity', '0').fadeTo(250, 1.0);
});

})

</script>

---

为什么不使用CSS转换呢？为什么在脚本中需要这个？我在想，我必须这样做，才能将obe元素称为图像，从而对另一个元素上的交互做出反应，即链接。另外，我在控制转换方面比css更灵活。如果有一种方法可以用CSS实现，我想，可能是每个链接都需要一个不同的CSS标签，这很麻烦。