jQuery fadeIn + fadeOut in IE?

StackOverflow https://stackoverflow.com/questions/1941356

  •  20-09-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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();  
    }); 
};

OTHER TIPS

try this workaround.

For me, using fadeIn() worked fine, my <div> would nicely fade-in on IE9, then (once the fading was completed) it would disapper again. Ah.

The fix was to add the filter css value shown here:

$("#fadeMeIn").fadeIn("slow");
$("#fadeMeIn").css('filter', 'none');

Try this:

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

I had a similar issue with a script in IE8. After I set the z-index the problem disappeared. I found the solution below.

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top