переход ко второму изображению при наведении

Я пытаюсь заставить функцию наведения изображения работать с затуханием. Он работает в 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>


jquery hover fade
person JohnSmith    schedule 09.07.2012    source источник
comment
не упомянете версию jQuery, firefox и IE?   -  person diEcho    schedule 09.07.2012
comment
Похоже на повторяющийся вопрос. Это может вам помочь: stackoverflow.com/questions/2983957/   -  person Leanne Seawright    schedule 09.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вам потребуется добавить некоторые css, например

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

или вам может понадобиться сначала выполнить предварительную загрузку изображения.

person fedmich    schedule 09.07.2012