jQuery fadeIn + fadeOut in IE?

Question

I am having a problem with gtetting fadeIn and fadeOut effect of jQuery to work properly in IE (6+7+8). The script works fine in FF and safari (fading nicely) but in IE it just shows/hides - no fading effect at all.

Any ideas?

$(".myclass ul li:eq(" + $(this).attr("href") + ")").fadeIn(5000);

The href attribute that it is getting is simply holding a numeric value representing the position in the ul li length.

Answer 1

try this workaround.

Answer 2

Try this:

$(".myclass ul li:eq(" + $(this).attr("href") + ")").hide().fadeIn(5000);

Answer 3

I had the same issue and used the code below (from the link posted by Q8-coder above). It works well but I still had some issues. I noticed that using fadeTo on a container element which had children with relative or absolute positioning didn't work in IE8. The parent would fade but all the children elements with positive or relative positioning would remain in view. The only way to get around it was to select the container element and all it's children using jQuery and then apply fadeTo all of them.

jQuery.fn.fadeIn = function(speed, callback) { 
    return this.animate({opacity: 'show'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeOut = function(speed, callback) { 
    return this.animate({opacity: 'hide'}, speed, function() { 
        if (jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
}; 

jQuery.fn.fadeTo = function(speed,to,callback) { 
    return this.animate({opacity: to}, speed, function() { 
        if (to == 1 && jQuery.browser.msie)  
            this.style.removeAttribute('filter');  
        if (jQuery.isFunction(callback)) 
            callback();  
    }); 
};