使用 Jquery 显示功能时，Div 坐标发生变化答案

【问题标题】：Div coordinates change when Jquery show function be used使用 Jquery 显示功能时，Div 坐标发生变化
【发布时间】：2015-01-04 00:52:19
【问题描述】：

我有两个 div，单击第一个潜水会导致第二个 div 切换。

#a{ border:1px solid red;width:400px;margin:50px;}
#b{position:absolute;border:1px green solid; width:400px;top:150px;}

和

<div id="a">AAAAAAAAAAAA</div><div id="b">BBBBBB</div><div id="test" >Write Cordinates here</div>
$("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");       
})

As here。当 A 被点击时，切换执行得很好，但是当 div B 显示时，它的坐标被改变了。我怎样才能防止它并在同一个地方制作 div B？

【问题讨论】：

ici.offset({top: tepe, left: burasi.left});我的代码需要。我将我的整个问题总结为这段代码。带有“A”id 的 Div 是 B 必须显示在其底部的任何图标。所以这一行（ici.offset）对我的代码是必不可少的。

标签： jquery show-hide

【解决方案1】：

您可以删除ici.offset({top: tepe, left: burasi.left});，因为那是改变位置的行。当文档准备好时定位您的元素，然后它根本不会移动。当您使用实际代码时它移动的原因是因为您正在尝试设置隐藏元素的偏移量。在 StackOverflow 中查看这个答案：jquery: get the offset of hidden element

不过，正如我所提到的，我使用 $(document).ready() 来修复它。这是我的代码：

    $("#a").click(function(){
    var burasi = $(this).offset();
    var tepe=burasi.top + $(this).outerHeight(true);
    var ici = $("#b");
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left} );
    $("#test").html("top: "+tepe+", left: "+burasi.left);
    ici.fadeToggle("slow");

});

请随时在此处检查它是否正常工作：http://jsfiddle.net/lrojas94/7hLypdnr/2/

【讨论】：

第一次计算坐标时没问题。但是在第二次计算时它会出错。
通过 .show() 显示，然后使用 .offset() 解决问题。为我提出新想法点赞。
谢谢 :) 那是我在帖子中提到的链接 :)

【解决方案2】：

阅读本文http://gabrieleromanato.name/jquery-bug-with-offsets-positioning-and-hidden-elements/

您可以通过在偏移前运行切换来避免这种情况

$("#a").click(function(){
  var burasi = $(this).offset();
  var tepe=burasi.top + $(this).outerHeight(true);
  var ici = $("#b");
  ici.fadeToggle("slow");
  ici.offset({top: tepe, left: burasi.left}); 
  $("#test").html("top: "+tepe+", left: "+burasi.left);   
});

见DEMO

【讨论】：

这是一个解决方案。但我无法理解为什么它是准确的？ Jquery 有 bug 吗？
没有错误。正如我在回答中解释的那样，这是因为您正在尝试移动隐藏的对象。请注意，此答案中的用户所做的是仅在对象可见时才移动对象。
@Huseyin 抱歉延迟重播.. Luis 关于移动隐藏对象是正确的，我只是在可见时才尝试移动.. 你可以在使用 jsfiddle.net/7hLypdnr/5 之类的偏移之前使用 fadeToggle 或使用 animate( ) 而不是像 jsfiddle.net/7hLypdnr/7 这样的偏移量
@Huseyin 再次检查自己是否只是提醒#b 元素的坐标，而它的可见和隐藏就像jsfiddle.net/7hLypdnr/8
@Mohamed-Yousef 我认为有一个错误 jsfiddle.net/7hLypdnr/9 。我简化了我的问题。如果你看一下，你会看到 settin B div by f,xed values 返回不同的结果。