setting jQuery .offset(); while "display:none;" results in other left and top values than with "display:block;"

Question

the ajax loaded div below is "display:none" and it's position will be setted correct just, when the display style is not none! WHY? Is there a workaround? I'm thankful for any advice ...

function setTwPopup(x,y){
    $.ajax({
        url: "twPopup.html",
        async : false,
        success: function(result){
            $('body').append(result);
        }
    });
    var popUp = $('.twPopup');
    var x = x-71;
    var y = y-342;
    popUp.offset({'top': y, 'left': x});
    //popUp.draggable({ handle: popUp });
    //popUp.fadeIn(400);
}

Edit: A workaround with setting opacity to 0 instead of display: none is not good, because i need the .fadeIn() afterwards ... and fadeIn will fade it to the bevore setet

Answer 1

If an element is set to "display:none", you can't set position, width or height, elements has to be visible for calculation. Althought, you can set:

visibility: hidden;

OR

position: absolute;
left: -99999px;

Hope that helps!

Answer 2

How about this:

function showThatDiv() {
    thatDiv.css({
        display: 'block',
        opacity: 0
    });
    // calculate x and y HERE
    thatDiv.css({
        left: x,
        top: y
    }).fadeIn("slow");
}