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'
        });
    });

});

You can see it working in this 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/

Answer 3

也许这会有所帮助？

$(document).ready( function() {
    var div = jQuery("#dvVertigo");

    div.animate({
           left: '0',    
                top: '+=' + ($(window).height()-20)               
            }, 5000, function () {
                // Animation complete.
            });
});

完整代码：

http://jsfiddle.net/yyankowski/jMjdR/

Answer 4

编辑：不得不快速离开所以没有完成，我决定使用jquery ui作为例子（你需要核心）：

<html><head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style>
#line_three { width:100%; }
.line3_top {
    position:absolute;
    top:113px;
    left:0px;
}
.line3_btm {
    position:absolute;
    bottom:100px;
    left:0px;
}
</style>
<script type="text/javascript">
    var topbtm = true;
    $(document).ready(function(){
        $("#line_three").mouseenter(function(){
            if ( topbtm ) {
                $("#line_three").switchClass("line3_top","line3_btm",400);
            } else {
                $("#line_three").switchClass("line3_btm","line3_top",400);
            }
            topbtm = !topbtm;
        });
    });
</script>
</head><body>
<div id="line_three" class="line3_top">
    hello;
</div>
</body></html>

http://jsfiddle.net/syVzK/1/（更改了切换开关以防止过度动画）

我也喜欢其他一些建议。

EDIT2：刚刚在IE中测试过...它的工作原理很奇怪。也许必须直接做因为IE中使用Jquery UI切换类的奇怪行为。

<强> EDIT3 ：

好吧，我让这个适用于IE和FF ...虽然有些注意事项。 +20是为了防止跳跃。 innerHeight为0的测试是在没有为元素（或主体）设置高度的情况下，所以如果它位于一个div中，那么设置高度。

此外，此在jsfiddle 中无效，但在常规网页上工作。为此，请避免使用。

    <script type="text/javascript">
var topbtm = 1,top3=113,btm3=100;
$(document).ready(function(){
    $("#line_three").mouseenter(function(){
        var ih = $(this).offsetParent().innerHeight();
        if (ih==0){ih=$(document).innerHeight();}
        if ( topbtm==1 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"top":(ih-(btm3+20))}
                         ,500
                         ,function(){
                             $(this).css({"top":"auto","bottom":btm3});
                })
            topbtm=0;
        } else if ( topbtm==0 ) {
            topbtm=-1;
            $("#line_three")
                .animate({"bottom":(ih-(top3+20))}
                         ,500
                         ,function(){
                             $(this).css({"bottom":"auto","top":top3});
                })
            topbtm=1;
        }
    });
});
    </script>

Answer 5

$("#line-three").css({position:'absolute',top:'auto',bottom:'100px'})

应该这样做。你可能需要留下顶级＆＃39;值为自动

修改

要设置动画，您需要使用.animate（）;

试试这个：

$("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'}, 400)

Answer 6

可能：

 $("#line-three").animate({position:'absolute',top:'auto',bottom:'100px'},1200)

修改

是的，这比首次出现时要复杂一些。你可能需要分析它相对于它的容器的当前位置（使用offset）并从那里开始工作。

Answer 7

如果你想动画，你应该这样做：

$("#line-three").animate({
    top: "500px",
    }, 1200);

在这里小提琴：http://jsfiddle.net/nicolapeluchetti/xhHrh/

Answer 8

您可以使用以下方法为其设置动画： Check out this JSFiddle:

$('#button').click(function(e){ // On click of something
    e.preventDefault(); // Prevent the default click aciton
    $("#line-three").animate({
        top: "300px",
    }, 1200);
});

Answer 9

您可以通过以下方式设置当前最低值：css（'bottom'）。这对我有用（jQuery1.7.2）：

$('#line-three').css({bottom:$('#line-three').css('bottom'), top:'auto'});
$('#line-three').animate({ bottom: position }, 250);

从CSS“top”到“bottom”的jQuery动画

9 个答案: