jquery - jQuery UI - 使用位置 API 定位隐藏的 div 定位不正确

Question

我正在尝试在 HTML 下方使用 jquery UI位置API（#changer相对于）来定位 div。.demo

http://jsfiddle.net/jttdk/1/

<div class="demo-content">
    <div class="demo" title="click anywhere inside" >demo div</div>
    <div class="demo" title="click anywhere inside" >demo div</div>
    <div class="demo" title="click anywhere inside" >demo div</div>
    <div class="demo" title="click anywhere inside" >demo div</div>
</div>
<div id="changer">changer div</div>

JS：

$('.demo').click(function() {
    var _that = this;
    $("#changer").fadeOut(100, function() {
        console.log(_that.className);
        $(this).position({
            of: _that,
            my: 'left top',
            at: 'right top',
            offset: '10 10'
        }).show();
    });

});

笔记：

1. 它第一次工作正常。
2. 如果我像下面这样删除.fadeOut并将.position代码移到外面，同样可以正常工作

http://jsfiddle.net/jttdk/3/

    $("#changer").position({
        of: this,
        my: 'left top',
        at: 'right top',
        offset: '10 10'
    }).show();

如果我添加一个.hidebefore也会失败.position。（（即）$("#changer").hide().position）

我很想知道我在这里做错了什么。

Answer 1

jQuery UI Position 文档指出“注意：jQuery UI 不支持定位隐藏元素。 ”因此，先将元素淡出会阻止其.position()正常工作。由于.fadeOut()应用于display: none;元素，它没有位置，因此不能相对移动。

但是，您可以.animate()仅用于更改不透明度：

演示：http: //jsfiddle.net/SO_AMK/jttdk/6/

jQuery：

$('.demo').click(function() {
    var _that = this;
    $("#changer").animate({
        "opacity": 0
    }, 100, function() {
        $(this).position({
            of: _that,
            my: 'left top',
            at: 'right top',
            offset: '10 10'
        }).animate({
            "opacity": 1
        }, 100)
    });
});​

请注意，我display: none;从 CSS 中删除了。

Answer 2

颠倒顺序.position(...)- .show()jQuery UIposition插件无法正确计算隐藏元素的位置。

$('.settings-icon').click(function(){
  $('#control-panel').show().position({
    of: $(this),
    my: 'left top',
    at: 'left top'
   });
});