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中使用它（无动画版本）但不在我的应用中。进一步调试显示我忘记在我的jQuery UI自定义下载中包含Position组件！由于jQuery中具有相同名称的方法，它没有抛出错误。显然，当你同时启用时，你会得到一个或另一个，具体取决于参数 ......

Answer 1

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

jQuery不认为visibility: hidden是“隐藏元素”。

编辑：

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

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

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

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

Answer 2

在节目动画结束后定位它，如下所示：

$box.show("slow", function() {
     $text = $(this);
     $(this).position({
        my: "left top",
        at: "left top",
        of: $text
     });
});

Answer 3

我制作了fiddle，它在FF / Chrome中对我来说很好用。但是，我猜你所遇到的任何问题都与show()的第一步之前尝试的位置有关，当#box仍被隐藏时。

一个简单的解决方法是show().position().hide().show("slow")。这可以保证#box在位置出现时可见，但由于它很快发生，在再次隐藏之前你永远不会看到它。然后，您可以花时间展示#box：

$("#main-form").on("focus", ":text, textarea", function(){
    $text = $(this);
    $box.show().position({
        my: "right top",
        at: "left top",
        of: $text
    }).hide().show("slow");
});

它还增加了“功能”，即每次新的焦点事件都会出现show动画。

http://jsfiddle.net/C2GHM/1/

显示<div>相对于<textarea> </textarea> </div>

3 个答案: