Sildeshow在相同圖像上不會褪色懸停

Question

我在此網頁上有一個JQuery幻燈片http://www.2eenheid.de/cloud/。

1. 'Cloud'頁面有自己的背景圖片。
2. 將鼠標懸停在其他菜單項上可以使用淡入和淡出來更改此bg img
3. 但是，在「Cloud」菜單項上懸停時也會發生這種情況。這使得看起來很亂。它只是來回相同的圖像。如何在我的代碼中刪除這個？當bg img已經與img相同時，不要做任何事情。

JQUERY

<script type="text/javascript"> 
    $(function() { 
      var imgsrc = ''; 
      var newImg = ''; 
      imgsrc = $('.pikachoose').css('background-image'); 

      $('ul.slideshow-menu').find('a').hover(function() { 
       newImg = $(this).attr('src'); 
       if (imgsrc === newImg) { return; } 

       $('.pikachoose').stop().fadeOut('fast', function() { 
        $(this).css({ 
         'background-image': 'url(' + newImg + ')' 
        }).fadeTo('slow', 1); 
       }); 



      }, function() { 

       $('.pikachoose').stop().fadeOut('fast', function() { 
        $(this).css({ 
         'background-image': imgsrc 
        }).fadeTo('slow', 1); 
       }); 
      }); 

     }); 
    </script> 

Answer 1

當你這樣做imgsrc = $('.pikachoose').css('background-image');，然後imgsrc包含字符串

url(http://example.com/image.jpg)而不是

http://example.com/image.jpg

在哪裏因爲newImg包含http://example.com/image.jpg所以比較失敗。

嘗試轉換爲imgsrc一個適當的URL，就像這樣：

new_imgsrc=imgsrc.replace(/url\(("|'|)|("|'|)\)/g,''); 

，然後嘗試if

if (newImg === new_imgsrc){ 
    //do something 
}