jquery懸停圖像淡入淡出交換

Question

我一直在網上搜索一段時間，試圖找到編寫執行這個簡單任務的jquery腳本的最佳方法：使用優雅的淡入淡出效果在懸停時交換圖像。 我找到了許多解決方案（某種方式來笨重和笨重），並將其縮小到我認為最好的兩個方面：

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 。 我目前在我的“服務導航”（不同類型的懸停）上盤旋，但我想將它們應用於所有導航按鈕，以及頁腳中的社交圖標。 所有的懸停都是相同的 - 兩個圖像文件，一個在懸停時淡入另一個，並在休假時返回。 最好的方法是什么？ 也許上面的一個鏈接？

Answer 1

您也可以使用單個背景圖像完成此操作，並淡入和淡出透明div。 這是一個快速示例，可以擴展為單個圖像類自動工作：

$(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-one上看到運行演示

更新：這是一個更通用的解決方案（不完整，但顯示一些想法）： 演示二 。 只需將“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"); 
        }) 
    ; 
});

Answer 2

我在您提供的第二個鏈接中選擇了解決方案。 它簡潔，干凈，簡單。

• 創建兩個<img>標簽
• 將一個完全放在另一個上（帶有z-index CSS）
• 在懸停時，將具有較高z-index的圖像的不透明度淡化為0
• 這使它透明，您可以看到底層圖像
• 當懸停結束時，再次將不透明度淡化為1 。

完成

Answer 3

在$(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/

和演示

它的作用是什么

它通過文檔查看任何帶有“ro”類的“img”或“input”標簽。 翻轉圖像需要與普通圖像命名相同，但最后使用“_o”。 例如，“image.gif”的翻轉圖像將是“image_o.gif”。 找到所有圖像標簽后，腳本會預加載所有翻轉圖像並廣告“鼠標懸停”和“鼠標輸出”事件。

Answer 4

使用jQuery的Image Cross Fade Transition解釋了一些方法來解決這個問題。

Answer 5

我認為這是最好的方法，因為它使用CSS Sprites來實現效果。 教程和演示都說明了如何使用CSS3和jQuery實現這一目標。 看看下面：

http://css-tricks.com/fade-image-within-sprite/