JqueryUI隐藏效果并保留空间。

Question

我想用jquery UI的效果来隐藏一个元素，但我希望在元素被隐藏后，元素所占的空间能保留下来。我不想使用可见性属性，因为我使用的效果如下。

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

我试过用这个https:/api.jqueryui.comjQuery.effects.createPlaceholder。如下所示。

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

然而，我得到了以下错误。

Uncaught TypeError: e.css is not a function at Object.createPlaceholder (jquery-ui.js:8) at Object.success (myfile.html:317) at c (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at l (jquery.min.js:2) at 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")，脚本正常运行，占位元素被创建。