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

Question

我有一个<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");
});

目前， Logo 淡出，悬停 Logo 淡入两次。

感谢任何帮助。

Answer 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 来做到这一点，但在任何一种情况下，您都需要将图像绝对定位在彼此之上。