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

时间:2012-06-04 09:26:30

标签: jquery position jquery-animate margin

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

有人知道如何做到这一点?我的猜测是计算类似的东西:

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

aargh停电了。任何人吗?

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

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