jquery - 单击展开 div

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);
});