Question

I just wanted to know how jQuery can generate a fade effect in IE browsers when they don’t support opacity? Animating opacity is the way they do the fade in other browsers like Firefox and Chrome.
I went into the code but honestly I couldn’t find anything understandable to me!

Answer 1

From the jquery source, they basically detect if opacity is supported and if not, use IEs alpha filter

if ( !jQuery.support.opacity ) {
jQuery.cssHooks.opacity = {
    get: function( elem, computed ) {
        // IE uses filters for opacity
        return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
            ( parseFloat( RegExp.$1 ) / 100 ) + "" :
            computed ? "1" : "";
    },

    set: function( elem, value ) {
        var style = elem.style,
            currentStyle = elem.currentStyle;

        // IE has trouble with opacity if it does not have layout
        // Force it by setting the zoom level
        style.zoom = 1;

        // Set the alpha filter to set the opacity
        var opacity = jQuery.isNaN( value ) ?
            "" :
            "alpha(opacity=" + value * 100 + ")",
            filter = currentStyle && currentStyle.filter || style.filter || "";

        style.filter = ralpha.test( filter ) ?
            filter.replace( ralpha, opacity ) :
            filter + " " + opacity;
    }
};
}