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

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高度并从中减去(1)所需位置bottom,以及(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'
        });
    });

});

你可以看到它在这个jsFiddle中工作

Answer 2

您可以设置top:auto with .css方法然后设置animate:

$(document).ready(function(){
   $("#line-three").css({top:'auto'});   
   $("#line-three").animate({bottom:'100px'}, 200)   
})

编辑:

您可以使用正文/屏幕的大小进行播放,并将顶部位置转换为底部位置,然后设置动画到所需的底部位置:

$(document).ready(function(){
  var bodyHeight = $('body').height();
  var footerOffsetTop = $('#line-three').offset().top;
  var topToBottom = bodyHeight -footerOffsetTop;

  $('#line-three').css({top:'auto',bottom:topToBottom});
  $("#line-three").delay(100).animate({
    bottom: '100px',
  }, 1200); 

})

示例:http://jsfiddle.net/reWwx/4/