jQuery animation / hover and fade

Answer 1

What kind of animation do you want? FadeIn of the background image? That's not how to do that. Try instead setting the :hover background image for an element inside your a.nav_menu, with a.nav_menu having the default state. Then on hover, fade in the inside element.

say your markup becomes:

a href="" class="nav_menu" title="HOME"><strong>HOME</strong></a>

You can now style your A and STRONG tags. A receives the default background-image. In your css:

a.nav_menu{
   background-image: url(nav_.jpg);
}
a.nav_menu strong{
   background:none;
   display:block;
}

In your javascript:

$(function(){
  $("a.nav_menu")
    .mouseover(function(){
      $(this).find('strong:first').stop().animate({'background-image':'url(nav_hover.jpg)', opacity: 1},3000);
    })
    .mouseout(function(){
      $(this).find('strong:first').stop().animate({'background-image':'none', opacity: 0},3000);
    })
});

I didn't test it, and you should check if jquery's animate() function can do what you intend, using background-image like that.

Also, see this article, which uses background-position and a sprite image instead. It seems more proper to achieve the effect you intend.

Answer 2

Take a look at this blog post: http://www.bendewey.com/blog/index.php/9/jquery-rollover-image

Based on Daniel Roberts answer, the plugin is similar to his solution #2 in which I take a base link with an image on the bottom and then using relative positioning, I place the hover image on top. When the user hovers over the link the hover image on top fades from an opacity of 0 to 1, now depending on your image in the background, this could look nice and seamless, although, if your background image has a lot of contrast the results may have interesting results.

Answer 3

I'm pretty sure the problem is that JQuery cannot animate the background image fading in and out. This is because it is, in the end, restrained by CSS, and CSS has no way to change the opacity of just the background image, and certainly has no way of specifying two background images merged together at different opacities. Sorry for the bad news.

Solution #1

Go for something slightly simpler: use this JQuery plug-in Color Animations to animate the background color. It might not be as sexy as animating the background image, but if it was a simple image, it might be a good substitute.

Solution #2

You could try positioning an image behind it with position:relative or position:absolute, and then fading the opacity of the image. You could even do it with both images positioned in the same place, and then having them fade alternately. This solution seems possible, but also a bit of a mess. If I were to do this (and I don't know that I would) I would hack the images in on every such link with JQuery. If you can get the images positioned correctly and the right size and everything, then fading them in and out would not be that hard. (Famous last words.)

It's frustrating when the tools you use don't work the way they seem like they should, but I hope this helps.