JqueryUI hide with effect and keep space

Question

I'm trying to hide an element with an effect using jquery UI, but I'd like the space the element is taking to stay after the element is hidden. I don't want to use the visibility property, as I'm using an effect as follows:

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

I tried using this: https://api.jqueryui.com/jQuery.effects.createPlaceholder/ as follows:

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

However, I'm getting the following error:

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)

Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty

Twisty Twisty · Accepted Answer · 2020-04-23T22:49:10

You will need to use a jQuery Object as the element.

element

Type: jQuery

The element to create a placeholder for.

See example:

$(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>

If you use just "#effect", the script fails with an error. The button will then shift to the top when the animation is complete. Passing in $("#effect"), the script is run properly, the placeholder element is created.

JqueryUI hide with effect and keep space

1 Answers