需要用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'});

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

Answer 2

我找到了一种让它发挥作用的方法，但它看起来像是一个丑陋的黑客。我很高兴看到比这更优雅的解决方案：

var closing = false;

$("#PMinfo").dialog({

    close: function() {
        if (closing) return;
        closing = true;
        $(this)
            .dialog('open')
            .dialog("widget")
            .effect("transfer", {

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

            }, 500, function() {
                closing = false;
            })
        $(this).dialog('close');
    }

});

Answer 3

我猜你看到的问题是转移效应的起点。您的解决方案针对 IE 修复了该问题，但不适用于 Firefox。我已经为你总结了重要的部分。我希望有人发布一些能够更好地跨越浏览器边界的内容。

        close: function() {
            $(this)
                .dialog('open')                    
                .effect("transfer", {
                     to: "#smpb_info_btn",
                     className: "ui-effects-transfer"
                   }, 500, function() {
                  //do something at the end of the transfer            
                })
            $(this).remove();
        }