jquery - 当旁边有另一个 div 时调整固定的 div 大小

Question

我希望能够允许用户单击一个按钮，该按钮在已存在的 div 的右侧显示一个 div。这是我在哪里的 fiddle 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);
});

Answer 1

当你想设置它时，你不应该使用#change 的宽度，因为你会改变它。例如，您单击“滑动它”，它现在的宽度为“initWidth - 300”。然后调整窗口大小，宽度现在将变为“initWidth - 300 - 300”等等。

为了使您的示例有效，您可以改用 body 的宽度:

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

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