Mouseover fade effect button with jQuery

Question

I wrote a mouseover fade effect button with jQuery. My problem is that when the cursor mouse is over the image, it fades to white instead to "img.b" .Any suggestion why is it doing this?

  $(document).ready(function(){
  $("img.a").hover
  ( function() { $(this).stop().animate({"opacity":"0"}, "slow");
   },
  function() {
  $(this).stop().animate({"opacity":"1"}, "slow");
  });

  });

Here is the CSS:

div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
        }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

And here is the body code:

    <div class="fadehover">
    <a href="#">
    <img src="cbavota-bw.jpg" alt="" class="a" />
    <img src="cbavota.jpg" alt="" class="b" />
    </a>
    </div>

Answer 1

Your code is perfectly working. Just make sure the path for the images are correct or not.It is working on FF,chrome and in IE.

Answer 2

There is nothing wrong with your code. I would recommend to do this with CSS, not so resource intensive as JavaScript.

just by adding this to you code and removing the JavaScript code

.fadehover img {
  -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
        -o-transition: opacity .5s ease-in-out;
        transition: opacity .5s ease-in-out;
}

.fadehover img.a {
  opacity: 0;
}

.fadehover img.a:hover {
  opacity: 1;
}

.fadehover img.b {
  opacity: 1;
}

.fadehover img.b:hover {
  opacity: 0;
}

See this fiddle