jquery - 悬停时淡入第二张图像

Question

我尝试让图像悬停功能与褪色一起使用。它适用于 Chrome，但不适用于 Firefox 和 IE。在 Chrome 中它褪色很好，但在 Firefox 和 IE 中它只是在没有褪色的情况下交换。

我的代码如下所示：

$("#test1").hover(
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxx-color.png) center no-repeat").fadeIn("slow");
  },
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxxxx-bw.png) center no-repeat").fadeIn("slow");
  }
);

#footerLogosStart {
  text-align: center;
  height: 100px;
  width: 240px;
  float: left;
}

#footerLogosStart a {
  margin: 0 auto;
  padding: 0 0 20px 0;
}

#test1 {
  width: 136px;
  height: 21px;
  background: url('http://xxxxxx/wp-content/themes/xxxxxx/images/xxxxxx-bw.png') center no-repeat;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footerLogosStart">
  <a id="test1">TEST</a>
</div>

Answer 1

您可能需要添加一些 CSS，例如

#footerLogosStart a{
  display:block;
  width:100px;
  height:100px;
}

或者您可能需要先进行一些图像预加载。