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

我正在尝试使用jquery UI 位置 API（相对于.demo ）在下面的HTML中定位div。

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

 
 
demo div
 
demo div
 
demo div
 
demo div
 
 
changer 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(); 

如果我在.position之前添加.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 UI position插件无法正确计算隐藏元素的位置。

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