當另一個div在其旁邊時，調整固定div大小

我希望能夠允許用戶單擊一個按鈕，該按鈕顯示已經存在的div右側的div。這裏是我的一個小提琴http://jsfiddle.net/AV2mZ/。當另一個div在其旁邊時，調整固定div大小

正如你所看到的，當兩個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); 
});

來源

2013-01-05 Tom Smedley

我試圖調整其大小，但你的小提琴在我展開一百萬的警報。想發佈一個不這樣做的小提琴嗎？ – jmeas

@jmeas在這裏你去http://jsfiddle.net/AV2mZ/1/ –

當你想設置它，因爲它，你會改變你應該只不使用#change的寬度。例如，你點擊「滑動它」，所以它現在的寬度「initWidth - 300」。然後調整窗口大小，寬度將變爲「initWidth - 300 - 300」等。

爲了使您的示例工作，你可以用身體的寬度，而不是：

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

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

來源

2013-01-05 15:34:47 arthur

當另一個div在其旁邊時，調整固定div大小

回答

相關問題