Jquery 使用切换按钮调整 Div 大小

Question

我正在构建小型私人项目来学习 jquery，目前我被困住了。

目标是单击一个按钮，然后我的菜单和主要内容区域应该调整大小； 当我再次单击时，它应该将自身调整回正常大小。

第一部分确实有效，但第二部分“跳”了下来——我不知道为什么。

这是我的 JSFiddle： https://jsfiddle.net/ne1mb706/1/

HTML：

<div><button id="show_hide_button">click me</button></div>
<div id="some_box"></div>
<div id="some_other_box"></div>

CSS：

html, body {
    margin: 0;
    padding: 0;
}
#some_box {
    background: #fc0;
    width: 25%;
    height: 100px;
    float:left;
}
#some_other_box {
    background: #0cf;
    width: 75%;
    height: 100px;
    float:left;
}

JQuery 3.4.1：

var collapsed = false;
$('#show_hide_button').click(function() {
    if(!collapsed){
        $('#some_box').animate({width: '0%'});
        $('#some_other_box').animate({width: '100%'});
    } else {
        $('#some_box').animate({width: '25%'});
        $('#some_other_box').animate({width: '75%'});
    }
    collapsed = !collapsed;
});

谢谢你的帮助：）

Answer 1

您必须从可见的开始才能正确地制作动画：

var collapsed = false;
$('#show_hide_button').click(function() {
    if(!collapsed){
        $('#some_box').animate({width: '0%'});
        $('#some_other_box').animate({width: '100%'});
    } else {
        $('#some_other_box').animate({width: '75%'});
        $('#some_box').animate({width: '25%'});
        
    }
    collapsed = !collapsed;
});