我有一个< div>其中包含背景图片,< div>坐在HTML的工具栏中.
HTML：
<div id="toolbar"> <div class="image"> </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
});