jquery – foverOut / fade在悬停时的背景图像

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

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

任何帮助赞赏.

解决方法

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

原文地址：https://www.jb51.cc/jquery/181005.html