Как анимировать родительский контейнер после скрытия одного дочернего элемента и отображения другого?

Я пытаюсь анимировать родительский контейнер (который, по сути, является просто границей) после скрытия дочернего поля ввода и одновременного отображения другого дочернего текстового поля и наоборот. Пользовательский интерфейс jQuery - это то, что я использую.

Оба дочерних элемента имеют одинаковую ширину, только разную высоту. Высота текстового поля определяется атрибутом rows.

Вместо поведения по умолчанию мгновенного изменения размера родительского контейнера я пытаюсь заставить его анимировать переход по высоте.

Довольно уверен, что это не дублирующий вопрос.

<!-- Blue-bordered container -->
<div class="input-group text-info">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-mobile-alt fa-lg text-info"></i>
        </span>
    </div>
    <!-- Either an 'input' is displayed... -->
    <input type="text">
    <!-- ...or a 'textarea'  -->
    <textarea rows="5" style="display:none"></textarea>
</div>

javascript jquery jquery-ui
person Adam    schedule 11.06.2019    source источник
comment
Добро пожаловать в Stack Overflow. Этот вопрос можно улучшить, включив шаги или код, который вы пробовали. Лучше всего пройти тур: stackoverflow.com/tour или прочитать, как задать вопрос: stackoverflow.com/help/how-to-ask Stack Overflow предназначен для получения помощи или рекомендаций от сообщества, а не для написания кода за вас.   -  person Twisty    schedule 11.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Непонятно, чего вы пытаетесь добиться. Вот пример использования параметров .fadeOut() и .fadeIn().

$(function() {
  $(".input-group-text").click(function() {
    var p = $(this).parent().parent();
    var hidden = $(":hidden", p);
    if (hidden.is("input")) {
      console.log("Hide TextArea");
      $("textarea", p).fadeOut(100, function() {
        p.animate({
          height: "2.5em"
        }, 600);
        $("input", p).fadeIn(100);
      });
    } else {
      console.log("Hide Input");
      $("input", p).fadeOut(100, function() {
        p.animate({
          height: "7.5em"
        }, 600);
        $("textarea", p).fadeIn(100);
      });
    }
  });
});
div.text-info {
  border: 2px solid blue;
  border-radius: 3px;
  padding: .4em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
<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 class="input-group text-info" style="height: 2.5em;">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fas fa-mobile-alt fa-lg text-info"></i></span>
  </div>
  <input type="text">
  <textarea rows="5" style="display:none"></textarea>
</div>

Обновить

Вы можете использовать .animate() для настройки определенных стилей. Итак, чтобы обновить поле, примените к нему значение height, а затем используйте Animate, чтобы изменить его с определенной скоростью.

Пример

$(".text-info").animate({
  height: "7.5em"
}, 600);

.animate(свойства [, продолжительность] [, смягчение] [, полное])

  • properties — объект свойств и значений CSS, к которым будет двигаться анимация.

  • продолжительность (по умолчанию: 400) — строка или число, определяющее, как долго будет работать анимация.

Подробнее: http://api.jquery.com/animate/

Надеюсь, это поможет.

person Twisty    schedule 11.06.2019
comment
Привет. Извините за неясность. У вас есть правильное представление о переключении между «вводом» и «текстовым полем», но это не те элементы, на которые мне нужны эффекты. Это группа ввода (синяя рамка), которую я хочу медленно изменять/анимировать при переключении дочерних элементов. Прямо сейчас вы можете видеть, что он мгновенно изменяет размер после переключения. - person Adam; 12.06.2019
comment
@Adam, для этого вам нужно применить значение height к полю. то вы можете .animate() изменить высоту. - person Twisty; 12.06.2019