javascript - 尝试压缩当鼠标悬停在文本上时淡化图像转换的脚本

Question

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

这是目前的网站: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>