【问题标题】:jQuery animation keeping auto positioning with div resizejQuery动画通过div调整大小保持自动定位
【发布时间】:2012-06-08 09:26:54
【问题描述】:
我有一个可以在点击时显示和隐藏的左侧菜单 div。右边的内容 div 对齐 margin:0 auto;当我调整窗口大小时,它完全对齐在窗口的中间。但是,我想要的是,当左侧菜单 div 动画到它的全宽时,内容 div 应该动画到右边大小的剩余空间的中心。与屏幕分辨率无关。
有人知道如何做到这一点吗?我的猜测是计算如下:
document.viewport - leftmenu.width,然后将剩余空间一半对齐到内容 div 的中心。
啊,停电了。有人吗?
这里有一个小提琴:http://jsfiddle.net/5A3qA/48/
【问题讨论】:
标签:
jquery
position
jquery-animate
margin
【解决方案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 = 左