javascript - 显示相对于 &lt;textarea&gt; 的 <div>

Question

我有一个盒子(一个绝对定位的 <div> )。我还有一系列<textarea>和<input type="text">表单控件。当我关注任何<textarea>时我想在焦点项目左侧显示框(覆盖下面的任何内容)，可能带有精美的faceIn()动画:

+-----------+---------------------------
| div       | textarea                 |
|           |                          |
|           |                          |
+-----------+                          |
            |                          |
            |                          |
            |                          |
            +--------------------------+

我认为我可以使用 jQuery 或 jQuery UI Position 来为我定位元素(毕竟，jQuery UI Datepicker 行为显示的日历与我想要的框非常相似)，但我无法浏览文档。首先，两个库都有同名的不同项目:

• jQuery:.position()
• jQuery UI:.position()

...两者都有相同的限制:

• jQuery不支持获取隐藏元素的位置坐标
• jQuery UI 不支持定位隐藏元素。

到目前为止我的代码如下所示:

#box{
    left: 0;
    top: 0;
    position: absolute;
    width: 30px;
    height: 20px;
    background-color: orange;
}

var $box = $('<div id="box"></div>').hide().appendTo("#main-form");
$("#main-form").on("focus", ":text, textarea", function(){
    $text = $(this);
    $box.show("slow").position({
        my: "left top",
        at: "left top",
        of: $text
    });
});

当我聚焦文本区域时，$box显示但它不会从窗口的左上角移动。

我错过了什么？

<小时/>

编辑:根据您的建议，我很快就使其在 Fiddle 中工作(无动画版本)。但不在我的应用程序中。进一步的调试发现我忘记包含 Position我的 jQuery UI 自定义下载中的组件!由于 jQuery 中具有相同名称的方法，它不会引发错误。显然，当您同时启用两者时，您会根据参数得到一个或另一个...

Answer 1

将元素可见性设置为隐藏，而不是将其显示设置为无。

jQuery 不将 visibility:hidden 视为“隐藏元素”。

编辑:

另外，我不确定这是否正确。

$box.show("slow").position({

您的方法 position() 发生在动画完成之前。请尝试以下操作，而不是使用回调函数。

$box.show("slow", function() {
    $box.position();
});