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

Posted 2023-05-08

【中文标题】需要jquery对话框打开和关闭的传输效果

【英文标题】：Need transfer effect with jquery dialog box open & close

【发布时间】：2011-12-12 20:26:23

【问题描述】：

我正在寻找带有传输效果的 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>

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

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

【参考方案1】：

您可以为此使用 jquery 动画功能。

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

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

【讨论】：

嗨，我是初学者....你能不能给出完整的代码而不是 1 行。我可以将其粘贴到我的 aspx 页面中并对其进行测试。谢谢

【参考方案2】：

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

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

);

【参考方案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();