javascript - 试图浓缩一个脚本，当鼠标悬停在文本上时，该脚本会淡化图像过渡

我是Jquery的新手，它很棒，但是我在浓缩我编写的一些超级业余代码方面很挣扎。本质上，当将文本悬停在同一位置时，我需要能够使一系列堆叠的图像在同一位置淡入。应该非常简单，并且您可以提供的帮助将非常有用。

现在的位置是这个站点：site

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

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