如何通过 jQuery 使用淡入淡出添加类和移除类？答案

【问题标题】：How to addClass and removeClass with fade via jQuery?如何通过 jQuery 使用淡入淡出添加类和移除类？
【发布时间】：2014-03-02 19:39:37
【问题描述】：

我正在尝试将一张图像淡入另一张图像。我通过在悬停时使顶部图像透明来尝试 CSS 路由，但这在我的情况下不起作用。就我而言，在悬停时，我正试图将我的标志淡入我的标志并发光。徽标不是完美的形状，因此将两张图片叠加在一起是多余的，因为用户可以看到“上方”图片，也就是带有发光的徽标，而无需将鼠标悬停在上面。

我找到了 jQuery 的 addClass 和 removeClass 并认为这可行。到目前为止，它有，只是没有发生褪色。相反，它只是立即切换到悬停图像。
Here's a Fiddle of my code，除了我的徽标已替换为苹果，上方的徽标已替换为橙色，因为我的徽标图片存储在本地。

我在 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');
}

想法？谢谢！

【问题讨论】：

标签： javascript jquery css addclass removeclass

【解决方案1】：

尝试使用过渡

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

演示：Fiddle

由于目前仅在 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)
        })
    });
});

演示：Fiddle

【讨论】：

这在 Chrome 和 Opera 中效果很好，但由于某种原因，在 Firefox 中绝对没有图像的迹象。就像图像标签甚至不存在一样。
我通过将img 标签更改为div 标签解决了这个问题，但Firefox 仍然不会褪色。 Chrome 和 Opera 可以，但 Firefox 只是直接捕捉到 div#logo:hover 图像。
stackoverflow.com/questions/10354742/…
@Ben 所以我们需要另寻出路
这就是我使用 jQuery 的原因，因为 transition 不能与 Firefox 一起使用：P

【解决方案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 中不起作用。

【讨论】：

【解决方案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;    
    }

【讨论】：

【解决方案4】：

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

请看一下css3的例子

transition: background 1s linear;

【讨论】：