使用百分比宽度Jquery设置di​​v的动画宽度

Question

我有以下工作代码，我想更改它，因此它使用400px宽度intead的百分比。我怎么能这样做呢？ 具体来说，我想让它从25％的初始宽度变为0，再次点击按钮后再回到25％。 另外，使用相同的show_hide_button如何更改aditional 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/

Answer 2

如评论中所述，您可以将宽度设置为百分比动画。现在，要知道宽度是0％还是25％，我建议你和班级一起工作。就像那样：

$(document).ready( function(){
    $('#show_hide_button').click( function() {
        var toggleWidth = $("#some_box").hasClass('expanded') ? "0%" : "25%";
        $('#some_box').stop().animate({ width: toggleWidth }, function(){
            $(this).toggleClass('expanded');
        });
    });
});

这是一个工作小提琴：http://jsfiddle.net/umCyy/

Answer 3

我在这里很清楚，但我会试一试。

您的答案是更改比例因子。

常规栏的简单教程：

首先，它的工作方式是将你计算出的百分比设为“50％”，然后取出物体的宽度并确保“100”宽度已满（除非你想让它变得更复杂） ） 随着你获得更多的百分比，它会上升一个（除非你把它变得复杂）。

从jquery开始，我不熟悉，我尽可能地回答，希望从那里开始，你可以让它发挥作用。 此外，您可以在线查看许多类似的脚本。