1

我有以下工作代码，我想对其进行更改，以便它使用 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 });
    });
});

我将非常感谢任何帮助！

4

3 回答 3

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/

于 2013-06-21T22:22:14.363 回答
0

如评论中所述，您可以将宽度设置为百分比动画。现在，要知道宽度是 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/

于 2013-06-21T22:42:44.547 回答
-1

我在这里相当了解，但我会试一试。

你的答案是改变比例因子。

普通酒吧的简单教程：

首先，它的工作原理是取你计算的百分比让我们说“50%”，然后你取对象的宽度并确保“100”宽度是完整的（除非你想让它更复杂）当你获得更多的百分比让它上升一个（除非你让它变得复杂）。

至于 jquery，我不熟悉，我已经尽我所能回答，希望从那里你可以让它工作。此外，您可以查看许多在线类似的脚本。

于 2013-06-21T21:58:06.507 回答