具有位置绝对元素的动画

时间:2015-06-25 09:35:05

标签: jquery html css

关于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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

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

答案 1 :(得分:0)

请测试一下: $('。left')。animate({left:(window.innerWidth / 2 - 25)}) $('。mid')。animate({left:(window.innerWidth / 2 - 25)})