如何精简JQuery UI Show函数，仅保留blind效果

JavaScript部分 #

$(function() {
  // 执行blind效果
  function runEffect() {
    // Blind效果无需额外参数，直接调用show方法
    $("#effect").show("blind", {}, 500, callback);
  };

  // 回调函数：显示1秒后重置样式并隐藏元素
  function callback() {
    setTimeout(function() {
      $("#effect:visible").removeAttr("style").fadeOut();
    }, 1000);
  };

  // 按钮点击触发效果
  $("#button").on("click", runEffect);

  // 初始隐藏元素
  $("#effect").hide();
});

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

主要改动说明 #

• 移除了用于选择效果的<select>下拉框，因为仅保留blind效果
• 简化了runEffect函数：删除了获取选中效果的逻辑，去掉了针对scale、size等效果的参数判断，直接指定使用"blind"效果
• 保留了原有的回调逻辑，确保元素显示1秒后重置样式并隐藏

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