jQuery UI 父函数的位置 jQuery-object答案

【问题标题】：jQuery UI Position of parent functions jQuery-objectjQuery UI 父函数的位置 jQuery-object
【发布时间】：2012-04-19 20:08:37
【问题描述】：

我想在点击链接的位置显示一个弹出窗口 - 我希望重复使用相同的弹出窗口。因此，如果在弹出窗口已经显示时按下另一个链接，我希望它在更改位置并执行新的 slideDown 之前淡出。这意味着使用子函数 - 但位置函数似乎不接受引用的 Jquery 对象。没有错误，只是不显示 div。有什么建议么？？谢谢！

代码：

       $('.txtTd').click(function() {
            var selector=$(this);

            if ( $("#popupHelpTxt").is(':visible') ) {
                $("#popupHelpTxt").fadeOut(200, function() {
                    $("#popupHelpTxt").slideDown(200).position({
                        my:        "left top",
                        at:        "left bottom",
                        of:        selector, 
                        offset:     "0, 0",
                        collision: "fit"
                     });
                 });
            } else {
                $("#popupHelpTxt").slideDown(200).position({
                    my:        "left top",
                    at:        "left bottom",
                    of:        this,
                    offset:     "0, 0",
                    collision: "fit"
                });
            }
      });

如果我在位置参数中将“选择器”替换为其他内容，它确实有效（带有错误定位的弹出窗口）。

提前致谢！

【问题讨论】：

你从哪里得到这个接受对象的.position() 方法。我在standard jQuery 中没有看到。
我也不熟悉'position'，是不是只有JS？试试var selector = $(this)[0];
如果不清楚，抱歉！这是一个 jQuery UI 函数！感谢您提出的解决方案，但它们不起作用。
@Kyle 。这是一个 jQuery UI 函数！补充一点：如果我将表达式 var selector=$(this); 移动到 $("#popupHelpTxt").fadeOut(200, function() { 中，它会将 div 定位到“#popupHelpTxt”（即它本身）...

标签： jquery jquery-ui position positioning this

【解决方案1】：

来自 jQuery UI 位置文档：

用于相对于窗口定位任何小部件的实用脚本，文档、特定元素或光标/鼠标。

注意：jQuery UI 不支持定位隐藏元素。

不需要 ui.core.js 或 effects.core.js。

http://jqueryui.com/demos/position/

我的建议是坚持使用淡入淡出，并使用 animate 手动编写淡入淡出函数，并且只调整 opacity 因子，而不是 display

【讨论】：

谢谢@kyle！我明白你的意思，但我怀疑这是问题所在，因为 else 之后的代码，那是显示和定位 div 的代码，如果它确实不可见 - 工作得很好！我稍微摆弄了一下，发现 div 确实显示出来了，只是在更下方和更右边，每次点击都更远 - 到目前为止，您必须滚动窗口才能看到它。
其实没有。 slideDown的第一个作用是设置display:block，使其可见，这样代码就可以执行了。您的第一个函数在fadeOut 的回调中，因此它在fadeOut 设置display:none 之后才会执行，这是fadeOut 的最后一步。
为了测试这个，将slideDown移到位置声明之后。它不应该移动它。
当我在位置声明之后移动 slideDown 时，它仍然移动了它，但是这样做了：$("#popupHelpTxt").css('display','inline-block').position({ my: "left top", at: "left bottom", of: selector, offset: "0, 0", collision: "fit" }).css('display','none').slideDown(200); 它不漂亮，但功能在那里。建议？感谢您迄今为止的想法！