Question

一些我如何使用jquery对话框设置jquery传输效果，但有一个小故障。这是网址http://jsbin.com/amicev/2请去看看。当出现对话框时出现毛刺，然后在传输效果完成之前出现对话框。我希望在传输效果完成后出现该对话框。如果我在传输效果完成后尝试编写显示对话框的代码。

所以这是我的完整代码

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }
.ui-effects-transfer {
border: 2px dotted grey;
}
</style>
</head>
<body>
<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>
</body>
</html>

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

如果我尝试修改此行以在传输效果完成后出现对话框，则输出会变形。

     $(this).effect("transfer", {
     to: dlg.dialog("widget"),
     className: "ui-effects-transfer"
     }, 500,function() { dlg.dialog("open"); });

所以我只想在完成传输效果后显示对话框。所以告诉我在代码中我需要改变什么，结果输出不应该失真。

感谢

Answer 1

如您所见，如果通过transfer隐藏对话框小部件，则无法可靠地触发display: none;效果（因为在这些条件下无法测量小部件的尺寸）。 / p>

但是，您可以将其visibility属性设置为hidden，触发效果，然后将属性设置回visible。这在我的测试中得到了很好的结果：

  dlg.dialog("open").dialog("widget").css("visibility", "hidden");
  $(this).effect("transfer", {
      to: dlg.dialog("widget"),
      className: "ui-effects-transfer"
  }, 500, function() {
      dlg.dialog("widget").css("visibility", "visible");
  });

您会找到更新的JS Bin here。

带有传输效果问题的Jquery对话框

所以这是我的完整代码

1 个答案: