展开 div onClick答案

【问题标题】：expand div onClick展开 div onClick
【发布时间】：2015-05-23 01:55:57
【问题描述】：

您好，当我单击按钮时，我正在尝试制作一个可扩展的 div：我想用步骤制作动画，第一步是单击按钮，第二步是 div 宽度展开，第 3 步是 div 高度展开以获得整页。并且 div 内的文本必须更改，例如隐藏第一个文本并在步骤完成时显示第二个文本有人知道怎么做吗？有一个我想要做的步骤的草图：

【问题讨论】：

标签： jquery css expand

【解决方案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);
});

【讨论】：

谢谢你的工作，但问题是 div 的高度只会下降，就像高度不会在上下之间进行相等的扩展，它只会扩展 800px 到底部
是的，我想您还必须相应地更改 margin-top，$('.red').animate({ marginTop: "-350px", height: "800px" }, 500);
你知道如何修复展开 div 的滚动以使其获取我所有的文本区域实际上我为它提出了一个新问题但我没有得到答案：stackoverflow.com/questions/30418811/expand-div-content-scroll
你得到答案了吗？
否 :( 我得到了答案，但他的解决方案无法使我的所有文本都可见我想问题是我们在 -400px 处设置了边距

【解决方案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>

【讨论】：

啊！使用:focus 是我没想到的，谢谢分享！
也可以使用checkbox 和:checked，这样你就可以通过点击来切换。

【解决方案3】：

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

`.蓝色{ 宽度：100px；高度：100px；背景颜色：蓝色；

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

    }`

【讨论】：