jquery - foverOut/fadeIn悬停时的背景图片

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

目前徽标淡出,悬停徽标淡出两次.

任何帮助赞赏.

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来完成此操作,但在任何一种情况下,您都需要将图像绝对放在彼此之上.

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