使用jQuery淡入淡出圖片中的圖像變化

我不確定我的搜索引擎優化技巧是否生鏽，但我在jQuery中認爲是一件簡單的事情時遇到了麻煩，但我可以'沒錯。發生的事情是，圖像是一個很大的圖像。當我將鼠標懸停在其他圖標上時，通過切換類屬性可以改變大圖像，但我也希望它在轉換過程中淡入，但只保留圖像縮略圖。我有一種感覺，我很接近，但我不知道。使用jQuery淡入淡出圖片中的圖像變化

這裏是jQuery代碼：

$(document).ready(function() { 
    $('#inlinethumbs1 div a img').hover(function() { 
     var $this = $(this); 
     $('#previewheight1 img').fadeOut(function(){ 
      $('#previewheight1 img').attr('src', $this.src).fadeIn(); 
     }); 
    }); 
});

下面是HTML代碼：

  <div class="wrapper"> 
       <div class="previewposition"> 
        <div id="previewheight1"> 
         <img src="Image1.png" alt="" class="previewthumb"> 
        </div> 
        <div id="inlinethumbs1"> 
         <div class="float"> 
          <a href="Image1.png"><img src="Image1.png" alt="" class="thumb"></a> 
         </div> 
         <div class="float"> 
          <a href="Image2.png"><img src="Image2.png" alt="" class="thumb"></a> 
         </div> 
         <div class="float"> 
          <a href="Image3.png"><img src="Image3.png" alt="" class="thumb"></a> 
         </div> 
        </div> 
       </div> 
      </div>

來源

2013-12-08 JokerSushi

我認爲錯誤是在jQuery代碼行5

，而不是

$('#previewheight1 img').attr('src', $this.src).fadeIn();

獲取src值使用ATTR道具：

$('#previewheight1 img').attr('src', $this.attr('src')).fadeIn();

或

$('#previewheight1 img').attr('src', $this.prop('src')).fadeIn(); // use prop as of jQuery 1.6

來源

2013-12-08 13:19:42 N0lf

也非常出色，它的最後工作！唯一的一點是，當你不再徘徊在圖像上時，它也會消失，有沒有辦法覆蓋它？ – JokerSushi

也許最好不要使用懸停事件，而是使用mouseenter事件。每次移動鼠標時都會調用懸停事件，在輸入元素的那一刻，mouseenter只會被調用一次。 – N0lf

這是一個很好的觀點。非常感謝您的幫助，N0lf！：D – JokerSushi

使用jQuery淡入淡出圖片中的圖像變化

回答

相關問題