Question

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

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

});

注意：

第一次工作正常。
如果我删除.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 Position documentation状态＆＃34; 注意：jQuery UI不支持定位隐藏元素。＆＃34;因此，首先将元素淡出，可以防止.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)
    });
});

请注意，我从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'
   });
});

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

2 个答案: