jQuery 动画从 CSS "top"到 "bottom"

Question

我希望在页面加载时将 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);

Answer 1

我最终想出了一个解决方案...

基本上，您从旧的 top 位置到另一个相对于 top 的位置进行动画处理，您通过获取 window 高度和从 bottom 中减去 (1) 所需的位置，以及 (2) 您想要设置动画的元素的高度。然后，在动画结束时添加一个回调来更改 css，以便元素定位到底部值和顶部 auto 值

这是 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