我如何在懸停時從一個圖像淡入另一個圖像

Question

基本上，下面的jQuery代碼允許我在懸停時將一個圖像交換到另一個圖像，但是我希望它從第一張圖像逐漸淡出到另一張圖像，而且我不知道該怎么做（我已經搜索了一些答案而且我也嘗試過自己做）。

這個問題的實質是，似乎有很多人在問這個問題，但是在我發現的少數幾個問題上可能會有些幫助的答案（至少就我想做的事情而言），他們仍然不是我要找的東西

我從這里有一個工作腳本（http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/），我只想要淡入淡出效果，我試圖弄亂我自己用它，但是jQuery仍然是我的弱點，哈哈

    <script type="text/javascript">
    $(function() {
    $('img[data-hover]').hover(function() {
    $(this)
    .attr('tmp', $(this).attr('src'))
    .attr('src', $(this).attr('data-hover'))
    .attr('data-hover', $(this).attr('tmp'))
    .removeAttr('tmp');
    }).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
    });;
    });
    </script>

    <img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

這里（http://jqueryfordesigners.com/image-cross-fade-transition/）和這里（http://jqueryfordesigners.com/image-fade-revisited/）都是我想要做的很好的例子，但是它比我認為需要的代碼多得多。

任何想法都受到歡迎！ 另外，如果有人可以選擇更輕松的路線，那么我也不會介意哈哈。 謝謝！

Answer 1

這里可能是類似的問題：

jQuery使用淡入淡出效果更改圖像src

基本上在懸停時，您開始淡出

$('img[data-hover]').hover(function() {
var $image=$(this);
$(this)
.attr('tmp', $(this).attr('src'))
.attr('src', $(this).attr('data-hover'))
.attr('data-hover', $(this).attr('tmp'))
.removeAttr('tmp');

$image.fadeOut(400, function() {
        $image.attr('src',$image.attr('data-hover'));
    }).fadeIn(400);

});

與一個回調事件，並與fadeIn鏈接。 在回調事件中，您可以更改圖像源。

我粘貼的源代碼僅是說明性的，可能無法完全按照您的預期工作，但是您會明白的。

這是一個工作示例： http : //jsfiddle.net/GxBWt/

Answer 2

這是一個jQuery代碼

$("img").mouseenter(
  function () {
     $("img").attr("src","http://rhceblog.com/wp-content/uploads/2012/11/Yahoo_3.jpg");
  }
);
$("img").mouseleave(
  function () {
     $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt__9kJSk-ESPLpb_zfQ7SQm7Z_w_m32fyiD07hnTAU7zvFWx_dQ");
  }
);

演示 ： http : //jsfiddle.net/ipsjolly/R6FnC/

Answer 3

如果您真的想要那種效果，可以使用畫布。

我們有兩個圖像A和B。

1. 使用maxDimension（a，b）作為畫布的尺寸。
2. 將globalComposite設置為lighter
3. 設置globalAlpha = 0.1（0.1是可以更改的步長值，但范圍是[0，1]
4. 畫一個圖像
5. 設置globalAlpha = 1-步驟
6. 繪制圖像b

7. 重復3到6

   var i = 0.1; //全局alpha
   var runID; //間隔ID

   函數fadeImage（）{如果（i> 1）{clearInterval（runID）; 返回;
   } ctx.globalAlpha = i;
   ctx.drawImage（imageA，width，height）;
   ctx.globalAlpha = 1-i;
   ctx.drawImage（imageB，width，height）;
   i + = 0.1;
   }

   函數run（）{ctx.save（）; ctx.globalComposite =“打火機”; runID = setInterval（fadeImage，500）;
   ctx.restore（）; }

示例： http ： //jsfiddle.net/xFryE/1/

例如，我只是指定畫布的尺寸，而不調整兩個圖像的寬度，使用相同的圖像寬度應該更好。

Answer 4

您可以像這樣進行somthin：

有HTML代碼：

<div class="img" style="position:relative; z-index:1;">
  <div class="hover" style="position:absolute; z-index:3; top:0; left:0; display:none;"><img src="image-hover.png" /></div>
  <div style="position:absolute; z-index:2; top:0; left:0"><img src="image.png"></div>
</div>

有jQuery的：

$('.img').hover(
   function(){
     $(this).find('.hover').fadeIn();
},
   function(){
     $(this).find('.hover').fadeOut();
}
);

如果要從圖像：

<img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

您可以使用jquery $（'img'）。each（）將其替換為上面編寫的html代碼。