1

ユーザーが、既に存在する div の右側に div を表示するボタンをクリックできるようにしたいと考えています。ここに私がいる場所のフィドルがありますhttp://jsfiddle.net/AV2mZ/。

両方の div が存在するときにわかるように、「スライドする」をクリックすると、すべてが本来あるべき場所にとどまります。しかし、ウィンドウのサイズを変更すると、すべてが台無しになります。私はこのパズルを自分で解こうとしましたが、知識が不足しています。

どんな助けでも大歓迎です。

ありがとう！

<div id="change">
    <div style="width:56px;height:56px;position:absolute;background:#999;left:0;top:0;">Stay?</div>
    <div style="width:56px;height:56px;position:absolute;background:#999;right:0;top:0;">Stay?</div>
</div>
<div id="right" style="width:300px;height:100%;background:#000;position:fixed;right:-300px;">

</div>
<br><br><br><br><br><br><br><br>
<button id="toggle">slide it</button>

$('button').live("click",function() {
    $('#change').animate({
        width: $('#change').width()-$('#right').width()
    }, 300);
    $('#right').animate({
        right: "0"
    }, 300);
    return false;
});
$(window).resize(function() {alert($('#change').width()-$('#right').width());
  $('#change').animate({
        width: $('#change').width()-$('#right').width()
    }, 300);
});
4

1 に答える 1

1

#change の幅は変更するので、設定したいときに使用しないでください。たとえば、「スライドする」をクリックすると、幅が「initWidth - 300」になります。次に、ウィンドウのサイズを変更すると、幅は「initWidth - 300 - 300」などになります。

例を機能させるには、代わりに body の幅を使用できます。

$('#change').animate({
        width: $('body').width()-$('#right').width()
  }, {duration: 300, queue: false});

http://jsfiddle.net/j7Nxj/1/

于 2013-01-05T15:34:47.923 に答える