1

次の作業コードがあり、400px ではなく幅にパーセンテージを使用するように変更したいと考えています。どうすればそれを達成できますか？具体的には、ボタンをもう一度クリックすると、最初の幅が 25% から 0 になり、25% に戻ります。また、同じ show_hide_button を使用して、75% と 100% の間で切り替わるように追加の div の幅を変更する方法を教えてください。最初は 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 に答える