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 回答