展开 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；背景颜色：蓝色；

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

    }`

展开 div onClick

expand div onClick

css

jquery

expand