动画从底部到顶部而不是从顶部到底部的高度

问题描述：

取而代之的是典型的动画，从顶部开始向下走，我怎么能从元素的底部开始动画，并朝向元素的顶部工作？

事件由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代码吗？ – mrtsherman

答

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

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

需求是这样的：

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

Example Fix

答

position: absolute; 
bottom: 0px;

动画底+ 1

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

不确定你的意思。 –

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

答

动画，你会为顶部至底部，但添加element.scrollTop = 99999;

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

不确定你的意思。 –

动画从底部到顶部而不是从顶部到底部的高度

相关推荐