设置jQuery .offset();而“display:none;”则比“display:block”产生其他左值和顶值;

时间:2022-02-25 21:22:27

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 ...

下面ajax加载的div是“display:none”,当显示样式不是none时,它的位置将被设置为正确!为什么?有解决方案吗?我感谢任何建议……

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

编辑:将不透明度设置为0而不是显示:没有是不好的,因为之后我需要.fadeIn()。fadeIn会把它变成bevore setet

2 个解决方案

#1


4  

How about this:

这个怎么样:

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

#2


6  

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:

如果将元素设置为“display:none”,则不能设置位置、宽度或高度,元素必须是可见的才能进行计算。虽然,你可以设置:

visibility: hidden;

OR

position: absolute;
left: -99999px;

Hope that helps!

希望会有帮助!

#1


4  

How about this:

这个怎么样:

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

#2


6  

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:

如果将元素设置为“display:none”,则不能设置位置、宽度或高度,元素必须是可见的才能进行计算。虽然,你可以设置:

visibility: hidden;

OR

position: absolute;
left: -99999px;

Hope that helps!

希望会有帮助!