Question

我正在编写一个插件，可以通过点击弹出一个div。我创建了一个隐藏的div，我想淡入它。但是，它只是出现，而不是淡入，就好像我调用了show（）。我正在使用jQuery UI Position工具，因此我的代码如下所示：

$('#popover-1'+index).fadeIn('slow').position({
                    of: elem,
                    my: 'center top',
                    at: 'center bottom',
                    offset: '0 10'
                });

我想也许我会尝试聪明，并将其改为此，但没有效果：

$('#popover-'+index).fadeIn('slow', function() {
                    $(this).position({
                        of: elem,
                        my: 'center top',
                        at: 'center bottom',
                        offset: '0 10'
                    });
                });

HTML看起来像这样：

<div id="person-edit-1"  class='popover bottom' style="display:none;">
  <div class="arrow top" style="position: absolute; "></div>
  <div>Content goes here</div>
</div>

位置方法不会定位不可见的元素，所以当我在fadeIn之前调用position时它不起作用。

提前致谢！

Answer 1

如果jquery-ui位置必须显示，则必须取消隐藏，定位，重新隐藏，然后将其淡入。

一个选项：您可以定位元素，将不透明度设置为0，然后为不透明度属性设置动画，而不是使用fadeIn（'slow'）。这仅适用于了解不透明度属性（不是IE）的浏览器：

$('#popover-' + index).show().position({
  of: elem,
  my: 'center top',
  at: 'center bottom',
  offset: '0 10'
}).css('opacity', '0').animate({'opacity': '1'}, 'slow');

DIV淡入和定位

1 个答案: