expand div onClick

Question

你好，我想做一個可擴展的div當我點擊一個按鈕： 和我想做的步驟動畫，第一步是點擊按鈕，第二個div寬度展開，第3步div高度展開以獲取完整頁面。 和文本里面的div必須改變像隱藏第一個文本，並顯示第二個步驟完成時 任何人都有一個想法如何做到這一點？ 還有就是我想要做的步驟的草圖：

Answer 1

需要jQuery animate

$('.blue').click(function(){ 
    //expand red div width to 200px 
    $('.red').animate({width: "200px"}, 500); 
    setTimeout(function(){ 
     //after 500 milliseconds expand height to 800px 
     $('.red').animate({height:"800px"}, 500); 
    },500); 
    setTimeout(function(){ 
     //after 1000 milliseconds show textarea (or textbox, span, etc) 
     $('.red').find('input[type="textarea"]').show();  
    },1000); 
}); 

Answer 2

這可以用CSS真的很容易做到。 This video解釋得非常好。該視頻中有很多其他巧妙的技巧，但我將其與她解釋燈箱的部分聯繫起來。

.container { 
 
    padding: 100px; 
 
} 
 
.red, 
 
.blue { 
 
    width: 20px; 
 
    height: 20px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 
.red { 
 
    background-color: red; 
 
    font-size: 0; 
 
    color: white; 
 
    width: 50px; 
 
    transition: 1s height, 1s margin, 1s font-size, 1s 1s width; 
 
} 
 
.blue:focus ~ .red { 
 
    height: 100px; 
 
    width: 150px; 
 
    font-size: inherit; 
 
    margin-top: -40px; 
 
    transition: 1s width, 1s 1s height, 1s 1s margin, 1s 1s font-size; 
 
} 
 
.red .hint { 
 
    font-size: 14px; 
 
    padding: 4px; 
 
    transition: 1s 1s font-size; 
 
} 
 
.blue:focus ~ .red .hint { 
 
    font-size: 0; 
 
    transition: 1s font-size; 
 
}

<div class="container"> 
 
    <div class="blue" tabindex="-1"></div> 
 
    <div class="red"><span class="hint">text1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div> 
 
</div>

Answer 3

$(window).load(function(){ 
    $(".blue").click(function(){ 
     $(".red").animate({width:'400px'},1000).animate({height:'400px',top:'150px'},1000).text("qwqwqwq"); 
    }) 
}) 

`的.blue { 寬度：100像素; height：100px; background-color：blue;

} 
.red{ 
    width:200px; 
    height:100px; 
    background-color: red; 
    left:100px; 
    } 
div{ 
    display: inline-block; 
    margin:0; 
    padding: 0; 
    position: absolute; 
    top:300px; 

    }`