jquery - 悬停时淡出/淡入背景图像答案

【问题标题】：jquery - fadeOut/fadeIn background image on hoverjquery - 悬停时淡出/淡入背景图像
【发布时间】：2010-03-09 11:57:47
【问题描述】：

我有一个包含背景图像的<div>，<div> 位于 HTML 的工具栏中。

HTML：

 <div id="toolbar">
   <div class="image">&nbsp;</div>
 </div>

CSS：

#toolbar .image {
background url('images/logo.png') no-repeat top left;
}

#toolbar .imagehover {
background url('images/logoHover.png') no-repeat top left;
}

当鼠标悬停在#toolbar 上时，我希望.image 的背景图像发生变化，但使用.fadeOut() 和.fadeIn()

到目前为止，我有：

$("#toolbar").hover(function () {
  $(".image").fadeOut("slow");
  $(".image").addClass("imagehover");
  $(".imagehover").fadeIn("slow");
  },
  function () {
  $(this).removeClass("imagehover");
});

目前标志淡出，悬停标志淡入两次。

任何帮助表示赞赏。

【问题讨论】：

你不能改变背景元素的不透明度，这就是 fadeIn() 所做的——你可能需要隐藏一个元素并绝对定位它，然后淡入淡出.

标签： jquery

【解决方案1】：

在 jQuery 中没有办法在图像之间进行平滑过渡——它不知道如何在一张图像和下一张图像之间进行转换。您可以使用插件进行颜色转换。

您可以使用 CSS 过渡来完成其中的一些操作。您只能在 CSS 中设置的值上使用转换，并且它们还没有在所有浏览器中：

/* faded out logo class */
.faded-logo {
    opacity: 0.30;                 /* FX, Safari, GC, Opera, decent browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
    filter: alpha(opacity=30);                                         /* IE */

    background: url('images/logo.png') no-repeat top left;

    /* in Safari, FX and Chrome add a fade transition */
    -webkit-transition: opacity .25s linear .1s;
    transition: opacity .25s linear .1s;
}

/* no opacity on hover */
.faded-logo:hover {
    opacity: 1;                     /* FX, Safari, GC, Opera, decent browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
    filter: alpha(opacity=100);                                         /* IE */
}

这将在鼠标悬停时产生相当的淡入淡出效果，不透明度的变化仍会在 IE 中发生，但没有淡入淡出过渡。

另一种选择是将图像淡入淡出相互叠加 - 您可以使用 jQuery 悬停事件或 CSS 来做到这一点，但在任何一种情况下，您都需要将图像绝对定位在彼此之上。

【讨论】：

【解决方案2】：

//Use the fad in out callback 
$("#toolbar").hover(function () {
    $(".image").fadeOut("slow", function () {
        $(this).addClass("imagehover").fadeIn("slow", function () {
            $(this).removeClass("imagehover");
        });
    });

});

//or you can use animate 
$("#toolbar").animate({
    "class": "imagehover"
}, "slow", 'easein', function () {
    //do what every you want   
});

【讨论】：

removeClass 部分应该作为悬停回调，而不是新类的fadeIn 回调...可能是括号混乱的情况:) ...

【解决方案3】：

由于您不能淡化背景图像，您可以尝试switchClass()，您可以将其设置为计时器。我不确定你会得到一个纯粹的淡出和淡入，但你可能会得到一个很酷的变形效果。

所以应该是这样的：

$("#toolbar img:hover").switchClass("image","imagehover", "slow");

【讨论】：