จะทำให้คอนเทนเนอร์หลักเคลื่อนไหวได้อย่างไรหลังจากซ่อนลูกหนึ่งและแสดงอีกอันหนึ่ง

ฉันกำลังพยายามทำให้คอนเทนเนอร์หลักเคลื่อนไหว (ซึ่งโดยพื้นฐานแล้วเป็นเพียงเส้นขอบ) หลังจากซ่อนกล่องป้อนข้อมูลลูกและแสดงพื้นที่ข้อความลูกอื่นพร้อมกันและในทางกลับกัน 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>

javascript jquery jquery-ui

Adam 11.06.2019 แหล่งที่มา

comment

ยินดีต้อนรับสู่ Stack Overflow คำถามนี้อาจได้รับการปรับปรุงโดยรวมขั้นตอนหรือรหัสที่คุณได้ลอง วิธีที่ดีที่สุดคือเข้าร่วมทัวร์ชม: stackoverflow.com/tour หรืออ่านวิธีถามคำถาม: stackoverflow.com/help/how-to-ask Stack Overflow คือการขอความช่วยเหลือหรือคำแนะนำจากชุมชน ไม่ใช่เพื่อให้ใครเขียนโค้ดให้คุณ - Twisty 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="/th//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( คุณสมบัติ [, ระยะเวลา ] [, การค่อยๆ เปลี่ยน ] [, เสร็จสิ้น ] )

คุณสมบัติ - วัตถุของคุณสมบัติ CSS และค่าที่ภาพเคลื่อนไหวจะย้ายไป

ระยะเวลา (ค่าเริ่มต้น: 400) - สตริงหรือตัวเลขที่กำหนดระยะเวลาที่ภาพเคลื่อนไหวจะทำงาน

ดูเพิ่มเติม: http://api.jquery.com/animate/

หวังว่าจะช่วยได้

Twisty 11.06.2019

comment

สวัสดี. ขออภัยที่ไม่ชัดเจน คุณมีความคิดที่ถูกต้องเกี่ยวกับการสลับระหว่าง 'อินพุต' และ 'พื้นที่ข้อความ' แต่ไม่ใช่องค์ประกอบเหล่านั้นที่ฉันต้องการเอฟเฟกต์ เป็นกลุ่มอินพุต (เส้นขอบสีน้ำเงิน) ที่ฉันต้องการปรับขนาด/เคลื่อนไหวอย่างช้าๆ เมื่อเปลี่ยนองค์ประกอบลูก ตอนนี้คุณสามารถเห็นการปรับขนาดได้ทันทีเมื่อมีการสลับเกิดขึ้น - Adam; 12.06.2019

comment

@Adam สำหรับสิ่งนี้ คุณจะต้องใช้ค่า height กับกล่อง จากนั้นคุณสามารถ .animate() การเปลี่ยนแปลงความสูงได้ - Twisty; 12.06.2019

จะทำให้คอนเทนเนอร์หลักเคลื่อนไหวได้อย่างไรหลังจากซ่อนลูกหนึ่งและแสดงอีกอันหนึ่ง

คำตอบ (1)

คำถามในหัวข้อ