JqueryUI隐藏效果并保留空间

Question

我正在尝试使用 jquery UI 隐藏具有效果的元素，但我希望元素在隐藏元素后保留的空间。 我不想使用可见性属性，因为我正在使用如下效果：

$(".element").hide("explode");

我试过用这个： https://api.jqueryui.com/jQuery.effects.createPlaceholder/ 如下：

jQuery.effects.createPlaceholder(".element");

但是，我收到以下错误：

未捕获的类型错误：e.css 不是函数 在 Object.createPlaceholder (jquery-ui.js:8) 在 Object.success (myfile.html:317) 在 c (jquery.min.js:2) 在 Object.fireWith [as resolveWith] (jquery.min.js:2) 在 l (jquery.min.js:2) 在 XMLHttpRequest。 (jquery.min.js:2)

Answer 1

您需要使用 jQuery 对象作为元素。

元素

类型：jQuery

要为其创建占位符的元素。

查看示例：

$(function() {
  $("#button").on("click", function() {
    $("#effect").hide("explode", function() {
      $.effects.createPlaceholder($("#effect"));
    });
  });
});

#button {
  padding: .5em 1em;
  text-decoration: none;
}

#effect {
  width: 240px;
  height: 170px;
  padding: 0.4em;
  position: relative;
}

#effect h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="effect" class="ui-widget-content ui-corner-all">
  <h3 class="ui-widget-header ui-corner-all">Hide</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>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

如果您只使用"#effect"，脚本将失败并出现错误。动画完成后，按钮将移至顶部。传入$("#effect")，脚本运行正常，占位元素创建完毕。