3

以下の HTML でjquery UI position API (#changerに対して)を使用して div を配置しようとしています。.demo

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

.hidebeforeを追加しても同じように失敗します.position。((すなわち) $("#changer").hide().position)

ここで何が間違っているのか知りたいです。

4

2 に答える 2

4

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から削除したことに注意してください。

于 2012-10-15T18:56:58.913 に答える