jQuery UI - 使用位置API定位隐藏的div不能正确定位 [英] jQuery UI - positioning a hidden div using position API does not position correctly

问题描述

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

I am trying to position a div using jquery UI position API (#changer relative to .demo) in below HTML.

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 代码，如下所示

1. It works fine the first time.
2. The same works fine if I remove .fadeOut and move the .position code outside like below

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

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

如果我添加 .hide ，同样失败在 .position 之前。 （（即） $（＃changer）。hide（）。position ）

Same fails if I add a .hide before .position. ((i.e) $("#changer").hide().position)

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

I am curious to know what I am doing wrong here.

推荐答案

jQuery UI Position文档声明注意：jQuery UI不支持定位隐藏元素。因此，首先将元素淡出，防止 .position（）工作正常。由于 .fadeOut（）将 display：none; 应用于没有位置的元素，因此无法相对移动。

The jQuery UI Position documentation states "Note: jQuery UI does not support positioning hidden elements." So, by fading the element out first you prevent .position() from working correctly. Since .fadeOut() applies display: none; to the element it has no location and hence cannot be moved relatively.

但是，您可以使用 .animate（）来仅更改不透明度：

You can, however, use .animate() to only change the opacity:

演示： 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; from CSS。

Note that I removed display: none; from the CSS.

这篇关于jQuery UI - 使用位置API定位隐藏的div不能正确定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！