[jQuery] trouble with fadeIn and fadeOut on a element in ie6 and ie7, works in firefox

[mjatharvest]

Hello All,

I'm working on a site here http://208.79.237.221/

On the home page I have an ordered list of icons to choose between
five different pages. I'm using jQuery to add a hover image to the
markup after each <a> element, and then fade in and fade out the hover
image when on mouse hover.

Here's the script:

        $("div#in-programs a").each(function(){

                        var iconHref=$(this).attr("href");
                        var iconClass=$(this).parent().attr("class");
                        var hoverSpan="<span class='" + iconClass + 
"-hover"+"'><a href='"
+ iconHref + "' class='" + iconClass + "-hover" + "'>go</a></span>";
                        $(this).after(hoverSpan);
                        $(this).next("span").hide();
                }
        );

        $('li.fade').hover(function() {

                //fade in function
                var fade = $('> span', this);

                if (fade.is(':animated')) {
                        fade.stop().fadeTo(250, 1);
                } else {
                        fade.fadeIn(250);
                }
        }, function () {

                // fade out function
                var fade = $('> span', this);

                if (fade.is(':animated')) {
                        fade.stop().fadeTo(3000, 0);
                } else {
                        fade.fadeOut(3000);
        }
        });


Similar to this tutorial.
http://jqueryfordesigners.com/image-cross-fade-transition/

For some reason ie6 and and ie7 do not fade the image. They only
toggle the opacity on and off. Anyone seen this before?

By the way, I'm using jQuery 1.2.3.

Any help would be appreciated! Thanks