Question

我希望能够允许用户单击一个按钮，该按钮显示已经存在的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);
});

Answer 1

当您想要设置它时，您不应该使用#change的宽度，因为您将更改它。例如，您点击＆＃34;滑动它＆＃34;所以它现在的宽度＆＃34; initWidth - 300＆＃34;。然后你调整窗口的大小，宽度将是现在＆＃34; initWidth - 300 - 300＆＃34;等等。

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

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

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

当另一个div存在于其旁边时，使固定div调整大小

1 个答案: