我正在将一个div元素从绝对顶部位置动画到页面加载的绝对底部位置.
以下CSS和jQuery代码的组合无法移动任何内容：
CSS
#line-three {
position:absolute;
width:100%;
left:0px;
top:113px;
}
jQuery的
$("#line-three").animate({
bottom: "100px",},1200);
感谢您的帮助！
编辑：
我已经尝试改变它(根据graphicdevine的建议),但仍然没有雪茄：
var footerOffsetTop = $('#line-three').offset().bottom;
$('#line-three').css({position:'absolute',top:'',bottom:footerOffsetTop})
$("#line-three").delay(100).animate({
bottom: '100px',1200);
解决方法
我最终想出了一个解决方案
基本上,您从旧的顶部位置到另一个位置,也可以相对于您通过绘制窗口高度计算的顶部,从底部减去(1)所需的位置,以及(2)要动画的元素的高度.然后,在动画结尾添加一个回调来改变css,因为元素的位置是一个底部的值和顶部的自动值
这是jQuery脚本：
$('#click').click(function () {
var windowHeight = $(window).height();
var lineHeight = $('#line').height();
var desiredBottom = 100;
var newPosition = windowHeight - (lineHeight + desiredBottom);
$('#line').animate({top:newPosition},1000,function () {
$('#line').css({
bottom: desiredBottom,top: 'auto'
});
});
});
You can see it working in this jsFiddle