jQuery UI -使用positioning定位隐藏的div不能正确定位

Question

我试图使用jquery 位置 API (#changer相对于.demo)在下面的HTML中定位一个div。

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();

如果我在.hide之前添加一个.position，也会失败。((即) $("#changer").hide().position)

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

Answer 1

jQuery UI职位文档声明“注意: jQuery UI不支持定位隐藏元素”。因此，通过首先淡出元素，可以防止.position()正常工作。由于.fadeOut()将display: none;应用于元素，因此它没有位置，因此不能相对移动。

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

演示：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)
    });
});​

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

Answer 2

翻转.position(...)和.show()的顺序-- jQuery UI position插件无法正确计算隐藏元素的位置。

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