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