展开div onClick

Question

您好我正在尝试在点击按钮时创建一个可扩展的div： 我想用步骤制作动画，第一步是点击按钮，第二步是div宽度展开，第三步是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;

    }`