JQuery代码段

$("#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();

    });

}}

但是我希望像Dojo对话框那样实现传输效果。在这里，我给出了用户可以去的页面链接，看看我想用jquery对话框打开和关闭来实现这种效果的效果。所以请转到the link page，然后点击查看示例按钮，看看对话框的效果如何。

所以我希望当用户点击我的按钮时，对话框应该像Dojo一样打开，并且有关传输效果，当关闭对话框时，对话框应该缩小到按钮。请引导我使用代码片段，该代码片段展示了如何在jQuery对话框打开和关闭时获得相同的效果。

我复制的代码无效

<%@ Page Language="C#" AutoEventWireup="true"    CodeFile="JQueryDialogWithTransferEffect.aspx.cs" Inherits="JQueryDialogWithTransferEffect" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"    type="text/css" />
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"type="text/javascript"></script>

 <style type="text/css">

.ui-effects-transfer 
{
 border: 2px dotted grey;
}
</style>
<script type="text/javascript">
jQuery(function ($) {
    // Set up the dialog, don't show it yet
    // Note the effects, they tie up with the
    // transfer effect we do later.



    $("#dialog").dialog({
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "fade",
            duration: 500
        },
        autoOpen: false
    });

    // Hook up the button to toggle showing/hiding
    // the dialog
    $("#btnToggle").click(function () {
        var dlg = $("#dialog");
        alert("pp");
        // Show or hide?
        if (dlg.is(":visible")) {
            // Hide: Kick off the transfer effect and close the
            // dialog. The transfer will run simultaneously
            // with the fade we configured above
            dlg.effect("transfer", {
                to: "#btnToggle",
                className: "ui-effects-transfer",
                duration: 500
            }).dialog("close");
        }
        else {
            // Show: Show the dialog, then kick off a transfer
            // effect transferring the button to the dialog's
            // widget. Again the transfer and fade run simultaneously
            // and so work together.
            dlg.dialog("open");
            $(this).effect("transfer", {
                to: dlg.dialog("widget"),
                className: "ui-effects-transfer"
            }, 500);
        }
        return false;
    });
});

</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnToggle" value="Toggle Dialog"/>
<div id="dialog" title="Basic dialog" style="display: none">
<p>This is the default dialog which is useful for displaying information. 
The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</form>
</body>
</html>

请复制我的代码并在aspx文件中运行它并查看结果。请帮我搞错误....我的代码有什么问题。感谢

Answer 1

您可以指定对话框在对话框选项中出现/消失时应使用的效果：

$("#dialog").dialog({
  show: "slide",
  hide: "slide",
  autoOpen: false
});

Live example using the "slide" effect

jQuery UI有很多可用的效果，您可以在this examples page找到它们的演示。其中一个肯定是你正在寻找的。

更新：具体来说，“转移”效应很痛苦。 :-)我终于得到它主要工作，你会想要调整持续时间和缓和更好地结合并行效果：

HTML：

<input type="button" id="btnToggle" value="Toggle Dialog">
<div id="dialog" title="Basic dialog" style="display: none">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS：

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

JavaScript的：

jQuery(function($) {
  // Set up the dialog, don't show it yet
  // Note the effects, they tie up with the
  // transfer effect we do later.
  $("#dialog").dialog({
    show: {
      effect:   "fade",
      duration: 1000
    },
    hide: {
      effect:   "fade",
      duration: 500
    },
    autoOpen: false
  });

  // Hook up the button to toggle showing/hiding
  // the dialog
  $("#btnToggle").click(function() {
    var dlg = $("#dialog");

    // Show or hide?
    if (dlg.is(":visible")) {
      // Hide: Kick off the transfer effect and close the
      // dialog. The transfer will run simultaneously
      // with the fade we configured above
      dlg.effect("transfer", {
        to: "#btnToggle",
        className: "ui-effects-transfer",
        duration: 500
      }).dialog("close");
    }
    else {
      // Show: Show the dialog, then kick off a transfer
      // effect transferring the button to the dialog's
      // widget. Again the transfer and fade run simultaneously
      // and so work together.
      dlg.dialog("open");
      $(this).effect("transfer", {
        to: dlg.dialog("widget"),
        className: "ui-effects-transfer"
      }, 500);
    }
    return false;
  });
});

Live example

有关宽松的更多信息（这有助于更好地控制效果），请参阅easings showcase。

像Dojo模态窗口一样传递效果

JQuery代码段

1 个答案: