jquery - 带有位置绝对元素的动画

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 中却没有？ fiddle here

Answer 1

试试下面的代码。它应该工作。

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

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

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

更新 fiddle :https://jsfiddle.net/7vx8L85e/4/