jQuery动画通过div调整大小保持自动定位

Posted 2023-05-08

【中文标题】jQuery动画通过div调整大小保持自动定位

【英文标题】：jQuery animation keeping auto positioning with div resize

【发布时间】：2012-06-08 09:26:54

【问题描述】：

我有一个可以在点击时显示和隐藏的左侧菜单 div。右边的内容 div 对齐 margin:0 auto;当我调整窗口大小时，它完全对齐在窗口的中间。但是，我想要的是，当左侧菜单 div 动画到它的全宽时，内容 div 应该动画到右边大小的剩余空间的中心。与屏幕分辨率无关。

有人知道如何做到这一点吗？我的猜测是计算如下：

document.viewport - leftmenu.width，然后将剩余空间一半对齐到内容 div 的中心。

啊，停电了。有人吗？

这里有一个小提琴：http://jsfiddle.net/5A3qA/48/

【参考方案1】：

$('#content').css('position','absolute');
var nwpos =  ( $(window).width() - $('#content').width() ) / 2;        
nwpos= nwpos+ (tcontainer.width()/2);
$('#content').css("left", nwpos + "px");

【参考方案2】：

是的，您必须计算当前窗口的宽度并减去左侧菜单的宽度。然后从剩余的宽度中，得到中心，即 width/2 并从中减去内容宽度的一半。

w = 屏幕宽度 - 左侧菜单的宽度 左 = w/2 - contentdivWidth /2 contentwidth.left = 左