Question

在隐藏一个子输入框并同时显示一个不同的子文本区域后，我试图为一个父容器（本质上只是一个边框）设置动画，反之亦然。 jQuery UI是我正在使用的。

两个子元素的宽度相同，只是高度不同。文本区域的高度由“行”属性确定。

与其试图立即调整父容器的默认行为，不如尝试使它成为动画来改变高度。

完全有信心这不是重复的问题。

<!-- 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>

Answer 1

不清楚您要完成什么。这是使用if ((myVar || 0) && 100 > myVar) doSomething(); if (myVar !== undefined && 100 > myVar) doSomething();和.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()值，然后使用Animate以特定速度对其进行更改。

示例

height

.animate（属性[，持续时间] [，缓动] [，完整]）



properties-动画将朝其移动的CSS属性和值的对象。



持续时间（默认值：400）-一个字符串或数字，确定动画将运行多长时间。

查看更多：http://api.jquery.com/animate/

希望有帮助。

隐藏一个孩子并显示另一个孩子后如何为父容器设置动画？

1 个答案: