css() and opacity.. following fadeIn() not working

Question

when I set opacity to 0 in css() the following fadeIn() doesn\'t work

if I set opacity to 1 the loader element is showed but there will of course not be

Answer 1

The problem is that jQuery only does functions like fadeIn if the element is not visible. jQuery internally does $(this).is(':hidden') to decide whether or not to run the animation. The hidden filter clearly does not check to see if opacity is 0; it probably should.

The obvious solution is to set display: none as you have, or to call hide() before your call to fadeIn() if you are sure the element is hidden.

---

The other solution is to redefine the hidden filter to check for opacity:

jQuery.expr.filters.hidden = function(elem) {
    var width = elem.offsetWidth,
        height = elem.offsetHeight;

    return (width === 0 && height === 0) || (!jQuery.support.reliableHiddenOffsets && (elem.style.display || jQuery.css(elem, "display")) === "none" || (elem.style.opacity || jQuery.css(elem, 'opacity')) === "0");
};

Running .is(':hidden') will now check for opacity. See jsFiddle.

---

I've filed a bug report to cover this issue.