jQuery fadeIn + fadeOut in IE?

问题

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.

回答1:

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

回答2:

try this workaround.

回答3:

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');

回答4:

Try this:

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

回答5:

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/

来源：https://stackoverflow.com/questions/1941356/jquery-fadein-fadeout-in-ie

标签

jquery

fade

fadein