jquery - 需要jquery对话框打开和关闭的传输效果

Question

我正在寻找具有传输效果的jquery对话框打开/关闭。我从这个网站找到了一个并且它正在工作。但它没有按照我想要的方式工作。

这是代码

JQuery snippet
---------------
$("#PMinfo").dialog({

autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
close: function() {

    var $this = $(this);

    $this
        .dialog("widget")
        .effect("transfer", {

            to: "#smpb_info_btn",
            className: "ui-effects-transfer"

        }, 500, function() {

            $this.remove();

        });

}

});

CSS .ui-effects-transfer { border: 2px dotted gray; } 
---

HTML
----
<div id="PMinfo">Hello</div>
<button id="smpb_info_btn">Info</button>

我希望对话框不应该自动打开，而是当用户单击信息按钮时，它应该以传输效果打开，就像它出现在页面中心的按钮和位置一样。当用户关闭时，它会关闭并移动并消失到信息按钮。

所以请指导我需要改变什么才能以我的方式工作。谢谢

Answer 1

您可以使用 jquery animate 功能来实现此目的。

$(dialog).animate({'top':'20px','left':'20px', 'height':'20px', 'width':'100px'});

您必须提供按钮的顶部和左侧作为动画函数的输入，以便它放大到按钮。当用户单击按钮时，可以执行相反的操作。