jquery - 使用百分比宽度 Jquery 设置 div 的动画宽度

Question

我有以下工作代码，我想更改它，因为它使用 400px 宽度的百分比。我怎么能做到呢？具体来说，我希望它从 25% 的初始宽度变为 0，然后再次单击按钮后又回到 25%。此外，使用相同的 show_hide_button 如何更改附加 div 的宽度，以便它在 75% 和 100% 之间切换。初始 75%，单击按钮时为 100%，再次单击按钮时返回 75%。

这是我的:

$(document).ready( function(){
    $('#show_hide_button').click( function() {
        var toggleWidth = $("#some_box").width() == 400 ? "0" : "400px";
        $('#some_box').animate({ width: toggleWidth });
    });
});

我将非常感谢任何帮助!

Answer 1

给你:

更新:这应该有效

CSS:

#some_box {
    background: #fc0;
    width: 25%;
    height: 100px;
}
#some_other_box {
    background: #0cf;
    width: 75%;
    height: 100px;
}

JS:

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

http://jsfiddle.net/moderndegree/xLHb8/

原始答案:

$(document).ready( function(){
    $('#show_hide_button').click( function() {
        $('#some_box').animate({ width: 'toggle' });
    });
});

http://jsfiddle.net/moderndegree/xLHb8/1/