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中支持背景图片转换，请尝试使用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

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;

如何通过jQuery使用淡入淡出添加类和removeClass？

4 个答案: