jQuery-悬停时淡出/淡入背景图像 [英] jquery - fadeOut/fadeIn background image on hover

问题描述

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

I have a <div> which contains a background image, the <div> sits within a toolbar in 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()

When the mouse hovers over #toolbar I want the background image of .image to change but using .fadeOut() and .fadeIn()

到目前为止，我有:

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

当前徽标淡出，并且悬停徽标淡入两次.

Currently the logo fades out and the hover logo fades in twice.

任何帮助表示赞赏.

推荐答案

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

这篇关于jQuery-悬停时淡出/淡入背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！