如何通過jQuery添加淡入淡出類和removeClass？

Question

我試圖淡入一個圖像到另一個。我試圖通過懸停的頂部圖像透明的CSS路由，但這不適用於我的情況。在我的情況下，在盤旋時，我試圖用發光將我的標誌褪色到我的標誌中。標識不是完美的形狀，因此將兩張圖片放在一起是多餘的，因爲用戶可以看到「超過」圖片，也就是帶有輝光的徽標，沒有懸停在它上面。

我發現jQuery的addClass和removeClass，並認爲會工作。到目前爲止，它有，但沒有發生衰落。相反，它只是立即切換到懸停圖像。
Here's a Fiddle of my code，只是我的標誌已被蘋果取代，而過標誌已被橙色取代，因爲我的標誌圖片是本地存儲的。

中的JavaScript我在小提琴是這樣的：

$(document).ready(function() { 
    $('img#logo').hover(
    function(){ $(this).stop(true).addClass('over', 500) }, 
    function(){ $(this).stop(true).removeClass('over', 500) }); 
}); 

這裏是我的HTML：

<img id="logo" class="top" width="256" height="256" /> 

我的CSS：

img.top { 
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg'); 
} 

img.over { 
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png'); 
} 

的思考？謝謝！

Answer 1

嘗試使用過渡

#logo{ 
    transition: background-image 2s; 
    -moz-transition: background-image 2s; 
    -webkit-transition: background-image 2s; 
} 

演示：Fiddle

---

由於背景圖像過渡僅適用於Chrome支持現在，嘗試淡出（）

<div id="logo" class="top" /> 

然後

#logo { 
    width:256px; 
    height:256px; 
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg'); 
} 
#logo.over { 
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png'); 
} 

和

$(document).ready(function() { 
    $('#logo').hover(function() { 
     $(this).stop(true, false).fadeTo(500, .1, function() { 
      $(this).addClass('over').fadeTo(500, 1) 
     }) 
    }, function() { 
     $(this).stop(true, false).fadeTo(500, .1, function() { 
      $(this).removeClass('over').fadeTo(500, 1) 
     }) 
    }); 
}); 

演示：Fiddle

Answer 2

您需要使用div代替img標籤，然後你需要使用一個CSS過渡：

HTML：

<div class="logo"></div> 

CSS：

.logo { 
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg'); 
    transition: background-image .25s ease-in-out; 
    -moz-transition: background-image .25s ease-in-out; 
    -webkit-transition: background-image .25s ease-in-out; 
    height: 256px; 
    width: 256px; 
} 

.logo:hover { 
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png'); 
} 

注：出於某種原因，過渡不工作在Firefox。

Answer 3

由於CSS過渡似乎並不在Firefox背景圖片的工作。 您可以採用不同的方法。純html的CSS方法。

HTML

<div id="logo"> 
    <img id="logo-img1" src="http://imgsrc"> 
    <img id="logo-img2" src="http://imgsrc"> 
</div> 

CSS

#logo{ 
    position:relative; //not required if you already have given any position css 
} 
#logo img{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

#logo-img1{ 
     opacity:1; 
    } 

#logo-img2{ 
     opacity:0; 
    } 

#logo:hover #logo-img1{ 
     opacity:0;  
    } 

#logo:hover #logo-img2{ 
     opacity:1;  
    } 

Answer 4

http://jsfiddle.net/8tx36/4/

請，採取的例子來看看用CSS3

transition: background 1s linear;