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

前端之家收集整理的这篇文章主要介绍了jquery – foverOut / fade在悬停时的背景图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个< div>其中包含背景图片,< div>坐在HTML的工具栏中.

HTML:

  1. <div id="toolbar">
  2. <div class="image">&nbsp;</div>
  3. </div>

CSS:

  1. #toolbar .image {
  2. background url('images/logo.png') no-repeat top left;
  3. }
  4.  
  5. #toolbar .imagehover {
  6. background url('images/logoHover.png') no-repeat top left;
  7. }

当鼠标悬停在#toolbar上时,我想要更改.image的背景图像,但使用.fadeOut()和.fadeIn()

到目前为止我有:

  1. $("#toolbar").hover(function () {
  2. $(".image").fadeOut("slow");
  3. $(".image").addClass("imagehover");
  4. $(".imagehover").fadeIn("slow");
  5. },function () {
  6. $(this).removeClass("imagehover");
  7. });

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

任何帮助赞赏.

解决方法

  1. //Use the fad in out callback
  2. $("#toolbar").hover(function () {
  3. $(".image").fadeOut("slow",function () {
  4. $(this).addClass("imagehover").fadeIn("slow",function () {
  5. $(this).removeClass("imagehover");
  6. });
  7. });
  8.  
  9. });
  10.  
  11. //or you can use animate
  12. $("#toolbar").animate({
  13. "class": "imagehover"
  14. },"slow",'easein',function () {
  15. //do what every you want
  16. });

猜你在找的jQuery相关文章