jQuery visibility option on IE

Question

I have problem with this JS code. When I started to test it, it is working properly with FF and Chrome but not with IE8.

I guess, something is wrong with IE visiblity property or the mouseover events. I tried everything but I am so deep in here I can't see the whole picture.

How can I make it run properly also in IE. Hate IE :))

$(document).ready(function() { 
      var doFadeIn = function() { 
         $('.aboutme').css({ opacity:0, visibility:'visible'}).fadeTo(900,1);
         }; 
         $('layout_aboutme').mouseover(doFadeIn); 
      var doFadeOut = function(){
         $('.aboutme').css({ opacity:0, visibility:'hidden'}).fadeTo(900,1);
         };
         $('layout_aboutme').mouseleave(doFadeOut);
  });

Answer 1

You're looking for $('layout_aboutme') which isn't a valid Element. You probably mean the id $('#layout_aboutme') or class $('.layout_aboutme').

ps: $(function(){ ... }); is short for $(document).load(function(){ ... });

Answer 2

i dont get why your assigning variable, anyway..

$(document).ready(function()
{
    $('.aboutme').mouseover(function(){
        $(this).css({ opacity:0, visibility:'visible'}).fadeTo(900,1);
    });
    $('.aboutme').mouseleave(function(){
        $(this).css({ opacity:0, visibility:'hidden'}).fadeTo(900,1);
    });
});

You should also read jerone's comment and sort out your selectors.

Answer 3

Solved.

I changed the html tags to the div tags with specific ids . It worked. when it was working with all browsers except IE, I assumed it is all about css styles but it wasn't.

thanks guys.