How can i use JQuery fadeTo() in IE 7?

Question

I am using jquery fadeTo() its working in chrome and firefox but not in IE 7. Below code is not working in IE 7..

I have fixed table.nav td:have{ opacity:0.2;}

Run time i use jquery to change opacity 0.2 to 1.0

 $(document).ready(function() {  

          $("table.nav td").hover(function() {

              $("table.nav td:hover").fadeTo("slow", 1.0);



          });

      });

Answer 1

Your comment in your snippet says it will fade the opacity to 60 %. Infact, it will fade it to 100%. That simple maybe?

Another thing is your :hover expression in your selector "table.nav td:hover". :hover is no valid selector-/pseudo selector in jQuery.

Try:

$("table.nav td").hover(function() {
     $("table.nav td").fadeTo("slow", 0.6);
});

Answer 2

I created a sample and it does work in IE 7. Check out demo here.

Agree with jAndy about opacity issue.

$(document).ready(function() { 

        $("#hello").fadeTo("slow", 0.2);

        $("#hello").hover(function() {

                              $("#hello").fadeTo("slow", 1);

                            }, 
                            function ()
                            {
                              $("#hello").fadeTo("slow", 0.2);

                            }
          );
      });

Answer 3

I guess this is how you want it to work?

$(function() {
    $("table.nav td")
        .css("opacity", "0.2") //Doing this in jQuery is better cross browser than just opacity in CSS
        .hover(function() {
            $(this).fadeTo("slow", 1.0);
        },function() {
            $(this).fadeTo("slow", 0.2);
        });
});​

Example: http://jsfiddle.net/wk74b/1/

That code works in IE7 for me.