jQuery淡入替換上懸停的兩個圖像

我有問題與我的腳本。jQuery淡入替換上懸停的兩個圖像

我有id爲「web_click」的對象和id爲「web」的圖像。我想要做到這一點，當我懸停（或鼠標懸停）在圖像「網絡」源代碼中的「web_click」將從'web.png'替換爲'web_hover.png'（這些圖像具有相同的尺寸）與淡入淡出效果。當然，在'mouseout'或完成懸停源時，也必須使用淡入淡出來替換爲非懸停圖像。

但是現在這個劇本讓淡入上懸停「web_hover.png」和disappering（兩個圖像不顯示），當我從搬出光標「web_click」圖像回來與淡入淡出效果「web.png」。爲什麼當我徘徊時隱藏？

$(document).ready(function(){ 
$("#web_click").hover(function() { 
$('#web').fadeOut(); 
    $("#web").attr ("src","png/two/web_hover.png"); 
     }, function() { 
      $('#web').fadeIn(); 
    $("#web").attr ("src","png/two/web.png"); 
}); 

});

更新：我做了這種方法和淡入淡出的作品，但圖像之間的延遲。第一個圖像淡出，這裏暫停一點，兩個圖像都不顯示，第二個圖像淡入。我如何在沒有這些間隔的情況下做到這一點？

<script> 
$(document).ready(function(){ 
    $("#web_click").mouseover(function() { 
     $("#web").fadeOut('100', function(){ 
      $("#web").attr ("src","png/two/web_hover.png"); 
      $('#web').fadeIn('100');  
    }); 
    }); 
$("#web_click").mouseout(function() { 
    $("#web").fadeOut('100', function(){ 
     $("#web").attr ("src","png/two/web.png"); 
     $('#web').fadeIn('100'); 
    }); 
}); 
}); 
</script>

來源

2012-07-16 user1498911

試試這個

<style type="text/css"> 
     img 
     { 
      position:absolute; 
     } 
    </style> 
    <div id="web_click"> 
     <img src="png/two/web_hover.png" alt="Alternate Text" /> 
     <img style="display:none" src="png/two/web.png" alt="Alternate Text" /> 
    </div> 

    <script type="text/javascript"> 
     $("#web_click").hover(function() { 
      $('#web_click img').fadeToggle() 
     }, function() { 
      $('#web_click img').fadeToggle() 
     }); 
    </script>

爲IMG的風格是用來將兩個圖像在同一個地方

來源

2012-07-16 08:49:01 Charlie

謝謝你的答覆，但我不能使用它。 web_click是一個href圖像來改變懸停的兩個PNG。 web.png還有視差腳本的參數，但是img的位置必須在css中。我也做了這個：在mouseover和mousout作品上替換圖像，但不顯示淡出。你可以知道我應該修正嗎？ – user1498911 2012-07-16 13:45:15

我在這裏寫的代碼只是一個例子，您可以將其更改爲任何您想要的。但請確保您必須將兩張圖像放在同一位置。您可以刪除一個並在淡入淡出後更改src。 – Charlie 2012-07-17 01:36:45

jQuery淡入替​​換上懸停的兩個圖像

回答

相關問題

jQuery淡入替換上懸停的兩個圖像