Jquery 对话框 - 在关闭之前不会淡出答案

【问题标题】：Jquery dialog box - doesn't fade out before closingJquery 对话框 - 在关闭之前不会淡出
【发布时间】：2011-02-15 03:46:51
【问题描述】：

我的页面上有 div(box)，我正在使用此脚本将 div 显示为对话框。在那个div里面我有一个超链接，点击超链接我想淡出对话框并关闭..对话框的内容淡出，但对话框的边框保持不变。如果我在淡入淡出之后将 $("#box").dialog('close') 添加到单击功能没有任何效果..它只是完全关闭对话框。有什么帮助吗？使用 jquery-ui-1.7.2

<script type="text/javascript">
            $(document).ready(function(){
                 $("a#later").click(function () { 

                $("#box").fadeTo('slow', 0);
                 })
             });
            $(function () {
                $("#box").dialog({
                    autoOpen: true,
                    width: 500,
                    modal: true,

                });
            });
</script>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

怎么样

$("#box").fadeTo('slow', 0, function() {
  $("#box").dialog('close');
});

您希望在淡入淡出完成后关闭，对吗？

【讨论】：

这就是我所说的太棒了！
这个小曲子正是我所需要的，并且在 chrome 和 FF 中运行良好。还没有做任何 IE 测试。
实际上，$("#box").dialog("widget").fadeTo(...) 更好，因为淡入淡出动画适用于整个盒子，而不仅仅是内部。

【解决方案2】：

试试这个，它可能会工作：

$("a#later").click(function () {
   $("#box").fadeTo('slow', function() {
       $("#box").dialog("close")
   });
});

【讨论】：

不。它只是关闭，没有淡入效果。
你已经很接近了。。请看下面的答案。。FadTo 还需要第二个速度参数。

【解决方案3】：

我尝试了下面一些 Richard 的代码，它可以工作。您可以将效果名称作为字符串提供：

$("#dialog").dialog({
  hide: "fadeOut"
});

如果您有其他选项，也可以提供哈希，例如：

$("#dialog").dialog({
  hide: {effect: "fadeOut", duration: 5000}
});

【讨论】：

【解决方案4】：

试试这个：

            $(function () {
                $("#box").dialog({
                    autoOpen: true,
                    width: 500,
                    modal: true,
                    show: 'blind',
                    hide: 'fade'
                });
            });

在此处查看示例：Animated Dialog

【讨论】：

Aw Man.. 它现在甚至不加载对话框，它默认隐藏:)
现在它以淡入效果加载.. 它甚至不会关闭对话框
这真的很奇怪。尝试删除“显示”选项并检查我发布的链接以了解效果如何工作以及效果的可能值。

【解决方案5】：

这是我的代码：

$(function() {
$( "a#link-id" ).click(function(){$(".ui-dialog").fadeOut(2000)})});

这是工作脚本:)。您无需单击“关闭”按钮。

【讨论】：

但是如果有另一个对话框打开，它会同时淡出！