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