需要传输效果与jquery对话框打开＆amp;关

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

你必须提供顶级＆amp;按钮的左侧作为动画功能的输入，以便它放大按钮。当用户点击按钮时，可以进行相反的操作。

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