expand div onClick

Question

Привет, я пытаюсь сделать расширяемый div, когда я нажимаю на кнопку: , и я хочу сделать анимацию с шагами, первый шаг - нажатие на кнопку, вторая - ширина div expand, а шаг 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 { ширина: 100px; высота: 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; 

    }`