JqueryUI прячется с эффектом и сохраняет пространство - PullRequest
Новая
       27

JqueryUI прячется с эффектом и сохраняет пространство

0 голосов
/ 23 апреля 2020

Я пытаюсь скрыть элемент с эффектом, используя jquery пользовательский интерфейс, но мне бы хотелось, чтобы пространство, которое занимает элемент, оставалось после того, как элемент скрыт. Я не хочу использовать свойство видимости, так как я использую эффект следующим образом: 

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

Я пытался использовать это: https://api.jqueryui.com/jQuery.effects.createPlaceholder/ следующим образом: 

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

Однако я получаю следующую ошибку:

Uncaught TypeError: e. css не является функцией в Object.createPlaceholder (jquery -ui. js: 8) в Object.success (myfile. html: 317) в c (jquery .min. js: 2) в Object.fireWith [as resolWith] (jquery .min. js: 2) в l (jquery .min. js: 2) в XMLHttpRequest. (jquery .мин. js: 2)

1 Ответ

0 голосов
/ 24 апреля 2020

Вам нужно будет использовать 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"), скрипт выполняется правильно, элемент-заполнитель создан.

...