簡單的圖像交換與翱翔的褪色

我正在尋找一種簡單的方法來交換與交叉褪色懸停圖像。我已經看到了很多解決方案 - 但我發現的一切似乎都很臃腫&複雜。有沒有簡單的方法來實現這一點？簡單的圖像交換與翱翔的褪色

圖交換代碼我使用：

$(function() { 
$(".img-swap").hover(
    function() { 
     this.src = this.src.replace("_off","_on"); 
    }, 
     function() { 
      this.src = this.src.replace("_on","_off"); 
    }); 
});

有沒有辦法在這裏添加淡入/淡出？或者這是錯誤的方式去做這件事？我試過的所有東西似乎都不起作用！任何幫助將不勝感激。

來源

2012-12-21 vonholmes

的非常簡單的解決方法就是讓兩個圖像，如果你正在做淡入淡出這是必要的，因爲兩個圖像將在同一可見時間，只是淡出一個和另一個，就像[**這個FIDDLE **]（http://jsfiddle.net/adeneo/xTw44/）??? – adeneo

感謝您的幫助 - 這似乎是最好的解決方案。如果您發佈答案，我會接受。再次感謝！ – vonholmes

樂意提供幫助，並在上面的代碼中添加了答案。 – adeneo

要交叉淡入淡出兩個圖像，兩個圖像都會在某一時刻可見，所以您需要DOM中的兩個圖像。你可以只用一個圖像來做，但是你必須淡出圖像，交換源代碼並淡入，這實際上並不是交叉淡入淡出。

<img src="image1.png" id="test" /> 
<img src="image2.png" id="test2" />

JS：

$('#test').on('mouseenter', function() { 
     $(this).fadeOut('slow'); 
     $('#test2').fadeIn('slow'); 
}); 

$('#test2').css({left: $('#test').position().left, top: $('#test').position().top}) 
      .on('mouseleave', function() { 
     $(this).fadeOut('slow'); 
     $('#test').fadeIn('slow'); 
});

FIDDLE

來源

2012-12-21 11:38:54 adeneo

萬分感謝。我做的唯一不同的是刪除'.css（{left：$（'#test'）.position（）。left，top：$（'#test'）.position（）。top}）'而不是在CSS中添加'＃test2 {position：absolute; top：0;左：0;}' – vonholmes

是的，這工作，我只是用位置技巧來定位第二個圖像完全相同的第一，但一個包裝和一個小CSS將修復，以及所以不是一個真正的問題。樂於幫助！ – adeneo

jsBin demo

$(".img-swap").on('mouseenter mouseleave', function(e){ 

    var mE = e.type=='mouseenter'; 
    var c = ['_on','_off']; 
    this.src = this.src.replace(mE?c[1]:c[0] , mE?c[0]:c[1]); 
    $(this).hide().stop().fadeTo(1000,1); 

    });

來源

2012-12-21 10:59:54

這也很好，但它會淡化成白色/背景而不是其他圖像，雖然也許我沒有提出明確的問題。非常感謝。 – vonholmes

@vonholmes是的...... adeneo的回答不僅僅是好的原因，它是淡入淡出的最佳方式，而且您的所有圖片都將被加載，並且不會出現jQuery圖片請求和加載時間問題:)不客氣 –

使用下面的代碼，並且還包括jquery的。

$("#one").hover(function(){$('#one').fadeOut(1000);$('#two').fadeIn(2000);} 
); 
$('#one').fadeIn(2000); 

<span id="one"><img serc="image1path"></span> 
<span id="two" style="display:none"><img serc="image2path"></span>

來源

2012-12-21 11:01:21

簡單的圖像交換與翱翔的褪色

回答

相關問題