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

Question

我正在嘗試將一個圖像淡化為另一個圖像。 我通過使頂部圖像在懸停時透明來嘗試了CSS路線，但是在我的情況下這行不通。 以我為例，在懸停時，我試圖將徽標淡化為徽標。 徽標並不是完美的形狀，因此將兩張圖片彼此重疊是多余的，因為用戶可以看到“上方”​​圖片，也就是帶有發光的徽標，而無需將其懸停在上方。

我找到了jQuery的addClass和removeClass並認為那是可行的。 到目前為止，除了沒有發生衰落外，它已經存在。 相反，它只是立即切換到懸停圖像。
這是我代碼的小提琴 ，只是我的徽標已被替換為蘋果，而過度徽標已被替換為橙色，這是因為我的徽標圖片是本地存儲的。

我在Fiddle中使用的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;
}

演示： 小提琴

---

由於目前僅在Chrome中支持背景圖片轉換，因此請嘗試fadeOut（）

<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)
        })
    });
});

演示： 小提琴

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;