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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.