fade to second image on hover

Question

I try to get an image hover function to work with fading. It works in Chrome but not in Firefox and IE. In Chrome it fades nice, but in Firefox and IE it just swaps without a fading.

My code looks like this:

$("#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>

Looks like a duplicate question.. This may help you: http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery — SoulieBaby, Jul 09 '12 at 06:41

score 0 · Answer 1 · answered Jul 09 '12 at 06:36

0

You might need to add in some css like

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

or you might need to do some image preLoading first.

answered Jul 09 '12 at 06:36

fedmich

5,343
3
37
52

fade to second image on hover

1 Answers1