jquery hover image fade swap

我一直在網上搜索一段時間，試圖找到最好的方式來編寫一個jquery腳本來完成這個簡單的任務：在優雅的淡入淡出效果上懸停圖像。我發現有很多的解決方案（某種方式繁瑣和笨重），並把範圍縮小到我所看到的最好的兩個：jquery hover image fade swap

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

對於我而言，我希望能夠做這個懸停在一頁上多次交換。該頁面是http://www.vitaminjdesign.com。我目前有懸停在我的「服務導航」（不同類型的懸停），但我想將它們應用到所有的導航按鈕，以及在頁腳的社會圖標。所有的盤旋都是相同的 - 兩個圖像文件，一個在盤旋時消失，另一個在休假時返回。什麼是最好的方式去做這件事？上面的鏈接之一可能嗎？

來源

2009-12-07 JCHASE11

您也可以使用單個背景圖像完成此操作，並在&中淡出透明div。這裏有一個簡單的例子，它可以擴展爲一個類圖像的自動工作：demo-one

UPDATE：

$(document).ready(function() { 
    $("#mask-div") 
     .css({ 
      "position": "absolute", 
      "width": 275, 
      "height": 110, 
      "background": "rgba(255, 255, 255, 0.5)" 
     }) 
     .mouseover(function() { 
      $(this).fadeOut("slow"); 
     }) 
    ; 
    $("#test-img").mouseout(function() { 
     $("#mask-div").fadeIn("slow"); 
    }); 
});

運行演示可以在jsbin可以看到這裏是一個更通用的解決方案（不完整的，但顯示了一些想法）：demo-two。只需將類「fade-img」添加到任何想要獲得此效果的圖像即可。

$(document).ready(function() { 
    $(".fade-img") 
     .before("<div class='fade-div'></div>") 
     .each(function() { 
      var img = $(this); 
      var prev = img.prev(); 
      var pos = img.offset(); 

      prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
       .mouseover(function() { 
        $(this).fadeOut("slow"); 
       } 
      ); 
     }) 
     .mouseout(function() { 
      $(this).prev().fadeIn("slow"); 
     }) 
    ; 
});

來源

2009-12-07 05:00:01 jthompson

內$(document).ready()

$('.imgbuttonclass').hover(function(){ 
    $(this).animate({ 
     backgroundImage: 'img2.png' 
    },500); 
},function(){ 
    $(this).stop(true).animate({ 
     backgroundImage: 'img1.png' 
    },500); 
});

編輯

如果你只是想這樣做：http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

然後使用jthompson的回答或者只是使用代碼從該網頁。如果你要使用兩個單獨的圖像，你可能想看看這個：

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

和demo

它的作用是