当鼠标悬停在文本上时，尝试压缩一个淡化图像过渡的脚本

Question

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

Answer 1

我似乎已经知道如何做到这一点：

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