如何修改jQuery UI Dialog对话框的关闭动画效果

要将对话框的关闭效果从爆炸（explode）改为向顶部角落移动并关闭，只需替换原代码中hide配置的效果类型，使用自定义动画属性控制对话框的位置和透明度即可。

修改后的完整代码 #

JavaScript

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "animate",
      duration: 1000,
      options: {
        // 移动到左上角，同时淡出
        top: 0,
        left: 0,
        opacity: 0
      }
    }
  });

  $("#opener").on("click", function() {
    $("#dialog").dialog("open");
  });
});

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

关键修改说明 #

• 将原hide配置中的effect: "explode"替换为effect: "animate"，借助jQuery动画引擎实现自定义效果
• 通过options参数指定动画目标状态：
  • top: 0和left: 0让对话框移动到页面左上角（若要移动到右上角，可改为top: 0和right: 0）
  • opacity: 0让对话框在移动过程中逐渐淡出，增强过渡自然感
• 保持duration: 1000维持原动画时长，可按需调整数值

内容的提问来源于stack exchange，提问作者phil