How to addClass and removeClass with fade via jQuery?

Question

I'm trying to fade one image into another. I tried the CSS route by making the top image transparent on hover, but that's not going to work in my case. In my case, on hover, I'm trying to fade my logo into my logo with a glow. The logos aren't a perfect shape, so having the two pictures on top of one another is redundant, since the user can see the "over" picture, aka logo with a glow, without hovering over it.

I found jQuery's addClass and removeClass and thought that'd work. So far, it has, except that the fading isn't occurring. Instead, it's just immediately switching to the on-hover image.
Here's a Fiddle of my code, except that my logo has been replaced by an apple and the over-logo has been replaced by an orange, since my logo pictures are locally stored.

The JavaScript I have in the Fiddle is this:

$(document).ready(function() {
    $('img#logo').hover(
   function(){ $(this).stop(true).addClass('over', 500) },
   function(){ $(this).stop(true).removeClass('over', 500) });
});

And here is my HTML:

<img id="logo" class="top" width="256" height="256" />

And my CSS:

img.top {
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}

img.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

Thoughts? Thanks!

Answer 1

Try using a transition

#logo{
    transition: background-image 2s;
    -moz-transition: background-image 2s;
    -webkit-transition: background-image 2s;
}

Demo: Fiddle

---

Since background-image transition is supported only in Chrome for now, try fadeOut()

<div id="logo" class="top" />

then

#logo {
    width:256px;
    height:256px;
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}
#logo.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

and

$(document).ready(function () {
    $('#logo').hover(function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).addClass('over').fadeTo(500, 1)
        })
    }, function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).removeClass('over').fadeTo(500, 1)
        })
    });
});

Demo: Fiddle

Answer 2

As css transition doesn't seems to work for background images in firefox. You can follow a different approach. Pure html css approach.

HTML

<div id="logo">
  <img id="logo-img1" src="http://imgsrc">
  <img id="logo-img2" src="http://imgsrc">
</div>

CSS

#logo{
    position:relative; //not required if you already have given any position css
}
#logo img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity  .25s ease-in-out;
    -webkit-transition: opacity  .25s ease-in-out;
}

#logo-img1{
        opacity:1;  
    }

#logo-img2{
        opacity:0;
    }

#logo:hover #logo-img1{
      opacity:0;    
    }

#logo:hover #logo-img2{
      opacity:1;    
    }

Answer 3

You need to use a div instead of an img tag and then you need to use a CSS transition:

HTML:

<div class="logo"></div>

CSS:

.logo {
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
    transition: background-image .25s ease-in-out;
    -moz-transition: background-image .25s ease-in-out;
    -webkit-transition: background-image .25s ease-in-out;
    height: 256px;
    width: 256px;
}

.logo:hover {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

Note: For some reason the transition doesn't work in Firefox.

Answer 4

http://jsfiddle.net/8tx36/4/

Please, take a look on the example with css3

transition: background 1s linear;