有沒有簡單的方法來使用jQuery淡入CSS：懸停背景？

我有一個使用CSS的IMG：懸停來顯示背景。有沒有簡單的方法來使用jQuery在後臺淡出而不是立即出現？有沒有簡單的方法來使用jQuery淡入CSS：懸停背景？

我當前的代碼是：

HTML: <img id="home-logo" src="path/logo-home.png">` 
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;}

來源

2011-01-27 Jon

是的。將背景放在不同的元素上並淡入該元素。任何瀏覽器或JavaScript庫都不支持背景圖像不透明度。 – eyelidlessness 2011-01-27 07:40:26

感謝您的評論/想法。我會玩這個概念。問題是：當我將鼠標懸停在它上面時，我可以淡入淡出，但是如何讓它加載透明並且隨着懸停而淡入？ – Jon 2011-01-27 14:11:27

我想通了，發現做到這一點的最好辦法是使用兩個圖像而不是背景：

HTML: 
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif"> 

CSS: 
    #home-link { cursor:pointer; } 
    #home-fade { display:none; } 

JS: 
    $(document.body).hover(function() { 
      $("#home-fade").fadeIn('slow'); 
     },function(){ 
      $("#home-fade").fadeOut('slow'); 
     });

來源

2011-01-27 14:42:25 Jon

是！你可以使用THIS ...

$('#home-logo').hover(function(){ 
    $(this).fadeIn('slow', function() { 
    //do something 
    }); 
});

有關更多信息，你應該看看這個教程。 fadeIn

來源

2011-01-27 06:15:18 Vivek

也許你需要淡化你的不透明度，在這種情況下，你可以使用fadeTo方法。第一個參數是持續時間或速度，第二個參數是不透明度的值。

jQuery代碼：

$('#home-logo').hover(
    function(){ 
     $(this).fadeTo('slow',0.2); 
    }, 
    function(){ 
     $(this).fadeTo('slow', 1.0); 
    });

HTML代碼：

<img id="home-logo" src="path/logo-home.png">

DEMO

來源

2011-01-27 07:36:05

有沒有簡單的方法來使用jQuery淡入CSS：懸停背景？

回答

相關問題