jQuery Forum

SOLVED: I simply changed the tags to be more specific, i.e. :

1. $(function() {
       $('a').hover(function(){
               $(this).children('.front').stop().animate({"opacity": '0'}, 400);
       }, function() {       
               $(this).children('.front').stop().animate({"opacity": '1'}, 500);       
       });
   });
   

as opposed to:

1. $(function() {
       $('.nav').hover(function(){
               $(this).children('.front').stop().animate({"opacity": '0'}, 400);
       }, function() {       
               $(this).children('.front').stop().animate({"opacity": '1'}, 500);       
       });
   });
   

Hi,
I recently starting using jQuery in my site design and after a few tutorials felt comfortable enough to start using it at will. I was generally playing around with making a few nav bars when I came across a problem... in IE.

Here's the problem:

1. I was using the .hover -> .animate effect to make a fading nav bar

2. I set it so that when the image was hovered over, it changed the opacity of the upper image to 0, revealing the lower image

3. When hovered off, the upper image would return to have an opacity of 1 and my rollover effect was complete

4. This was all fine and dandy until I wanted to make them links, so I changed to to instead of grabbing the image, grab the 'a' anchor tag

5. This worked fine in Firefox and Chrome, but IE had other ideas, and it simply doesn't want to show the lower image

Sorry about the density of the problem but does anyone know a way around this? Below is the link to the page as well as the CSS and the javascript.

Thanks for any help!

Page: http://dl.dropbox.co...tuff/index.html

Javascript: http://dl.dropbox.co...tuff/scripts.js

CSS: http://dl.dropbox.co...Stuff/style.css