具有位置绝对元素的动画

Question

关于jQuery中的动画。考虑以下两个绝对定位div的动画：

$('.left').animate({left: '+=' + (window.innerWidth / 2 - $('.left').innerWidth()/2 )})

$('.mid').animate({left: '+=' + (window.innerWidth / 2 - $('.mid').innerWidth()/2 )})

中间（黄色）div在开头居中。为什么黄色div仅在Firefox中移动到窗口的右边缘而在Chrome中不移动？小提琴here

Answer 1

尝试以下代码。它应该工作。

$('.left').animate({left: '+=' + (window.innerWidth / 2 - $('.left').innerWidth()/2 )})

$('.mid').animate({left: '+=' +(  window.innerWidth - $('.left').innerWidth()) })

上面的代码应该将$('.mid')移动到文档的左角。

更新小提琴：https://jsfiddle.net/7vx8L85e/4/

Answer 2

请测试一下： $（'。left'）。animate（{left：（window.innerWidth / 2 - 25）}） $（'。mid'）。animate（{left：（window.innerWidth / 2 - 25）}）