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 any fading in..

loader.css({
        top : ($(window).height() - loader.height()) / 2+'px',
        left : ($(window).width() - loader.width()) / 2+'px',
        opacity : 0
    })
    .fadeIn(1000);

if I use display:none it works!?

loader.css({
        top : ($(window).height() - loader.height()) / 2+'px',
        left : ($(window).width() - loader.width()) / 2+'px',
        display : 'none'
    })
    .fadeIn(1000);

Answer 1

Try using fadeTo()

loader.css({
    top : ($(window).height() - loader.height()) / 2+'px',
    left : ($(window).width() - loader.width()) / 2+'px',
    opacity : 0
})
.fadeTo(1000, 1);

Answer 2

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.