动画高度从下到上而不是从上到下答案

【问题标题】：Animate Height Bottom to Top Instead of Top to Bottom动画高度从下到上而不是从上到下
【发布时间】：2011-09-20 17:59:52
【问题描述】：

如何反向实现高度动画？

我怎样才能让它从元素的底部开始动画并向上到元素的顶部，而不是典型的动画从顶部开始向下运行？

事件由a#link-1触发，动画发生在div#line-1。

这是我的代码：它似乎不起作用。 :-/

HTML

<div id="pageContainer">
    <div id="line-1"></div>
    <a id="link-1" title="" href="#">Link 1</a>
</div><!-- end #pageContainer -->

CSS

#pageContainer{
    position: relative;
    margin: 0px 0px 200px 0px;
    min-height: 748px;
    height: 748px;
    background: url('../img/sprite.png') bottom center no-repeat;   
}
a#link-1{
    position: absolute;
    top: 686px;
    left: 36px;
    text-align: center;
    display: block;
    width: 76px;
    height: 24px;
    line-height: 24px;
    z-index: 20;
}
div#line-1{
    position: absolute;
    top: 4px;
    left: 30px;
    width: 340px;
    height: 687px;
    background: url('../img/sprite.png') 0px 0px no-repeat; 
}

// Initially hide                      
$("div#line-1").hide();
// Activate Line 1
$('a#link-1').click(function() {
    $('div#line-1').animate({
    opacity: 0.25,
    height: 'toggle'
    }, 5000, function() {
// Animation complete.
    });
});

【问题讨论】：

我们可以看看你的 html 结构和现有的 jQuery 代码吗？

标签： jquery height jquery-animate

【解决方案1】：

您div 和您的a 标签具有相同的ID。它们必须具有唯一的 ID。

$('a#line-1').click(function() {
    $('div#line-1').animate({

需要类似于：

$('a#line-1').click(function() {
    $('div#unique_id').animate({

Example Fix

【讨论】：

【解决方案2】：

position: absolute;
bottom: 0px;

动画底部 + 1。

您还可以对top 或margin-top 使用负值来向上移动。

【讨论】：

很好的答案.. 他的意思是你将它定位在底部：0 和绝对位置，而不是顶部（边距），这样元素就会保持在底部并长大。

【解决方案3】：

按照从上到下的方式制作动画，但添加 element.scrollTop = 99999;

这将确保内容的底部可见（除非出于某种原因，它的高度为 100,000 像素）并且效果将是自下而上的动画。

【讨论】：