从 CSS“顶部”到“底部”的 jQuery 动画答案

【问题标题】：jQuery animate from CSS "top" to "bottom"从 CSS“顶部”到“底部”的 jQuery 动画
【发布时间】：2012-01-21 01:10:48
【问题描述】：

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

【问题讨论】：

好的，拿到代码了。抱歉之前不在，但不得不分开。
是的，该脚本适用于 FF，但未在 IE 中测试。我创建了另一个不使用 jquery ui，但必须进行一些调整才能使其正常工作。
offset().bottom 不存在，offset() 只返回 top 和 left 属性。

标签： jquery css animation jquery-animate

【解决方案1】：

编辑：不得不快速离开所以没有完成，我决定使用 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 中不起作用，但在常规网页上起作用。避免，为此使用 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>

【讨论】：

这不会产生动画，只是跳跃。
@negatron 我让它在 ie 和 ff 中工作（edit3），但无法让 offsetParent() 在 jsfiddle 中工作，因此必须在没有它的情况下对其进行测试。不确定是什么原因造成的，但目前不愿意追查。

【解决方案2】：

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

应该这样做。您可能需要将“顶部”值重新设置为自动

编辑

要制作动画，需要使用 .animate();

试试这个：

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

【讨论】：

差不多就行了，但不是创建动画滑下，而是突然跳到底部...
您的编辑现在等同于 graphicsdevine 的回答（上图）。不幸的是，这不起作用。

【解决方案3】：

可能：

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

编辑

是的，这将比最初看起来更棘手。您可能需要分析它相对于容器的当前位置（使用offset）并从那里开始工作。

【讨论】：

感谢您的建议。我会调查的。关于如何开始使用偏移的任何明显建议？

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

您可以使用以下方法对其进行动画处理： 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);
});

【讨论】：

但这不位置是相对于页面底部没有？
这将使 div 从其绝对位置动画 300px，无论是在哪里。所以在这种情况下，距离页面顶部 300px。因此，如果您想将其向下移动 100 像素，则将其向下移动 113 像素 + 100 像素，对不起，我理解您现在想要做什么。

【解决方案6】：

你可以用 .css 方法设置 top:auto 然后动画：

$(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/

【讨论】：

但这会将它捕捉到底部并从那里开始动画。我正在寻找它从上到下移动...
从屏幕顶部到底部？还是相对于包含它的相对元素？
这真是太聪明了，谢谢。唯一的问题是，如果浏览器大小发生变化，我认为动画不会从同一个起点（即 113 像素）开始...
嗯，您可以尝试设置 % 值而不是 px。类似顶部的东西：5%

【解决方案7】：

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

基本上，您从旧的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

【讨论】：

【解决方案8】：

您可以通过：css('bottom') 设置当前的底部值。这对我有用（jQuery1.7.2）：

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

【讨论】：

【解决方案9】：

也许这会有所帮助？

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

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

完整代码：

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

【讨论】：