試圖壓縮一個腳本，當鼠標懸停在文本上時，圖像轉換淡入淡出

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

來源

2015-10-05 user5410663

爲什麼不使用CSS轉換爲目的？爲什麼你需要腳本？ –

我在想，我必須這樣做來調用obe元素（圖像）來對另一個元素（鏈接）上的交互作出反應。另外，我認爲控制轉換的靈活性比CSS更大。如果有一種方法可以通過CSS來實現，那可能是它需要爲每個鏈接使用不同的CSS標籤，這很麻煩。 – user5410663

看來我已經找到了如何做到這一點：

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

來源

2015-10-05 22:48:07 user5410663

試圖壓縮一個腳本，當鼠標懸停在文本上時，圖像轉換淡入淡出

回答

相關問題