动画高度从底部到顶部而不是从顶部到底部 [英] Animate Height Bottom to Top Instead of Top to Bottom

问题描述

如何反向实现高度动画？

How can I achieve height animation in reverse?

除了从顶部开始并向下工作的典型动画外，我怎样才能让它从元素的底部开始动画并向上移动元素的顶部？

Instead of the typical animation starting from the top and working its way down, how can I have it start the animation from the bottom of the element and work its way up towards the top of the element?

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

The event is triggered by a#link-1, the animation takes place in 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; 
}

JS

// 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.
    });
});

推荐答案

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

You div and your a tags have the same ID. They must have unique IDs.

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

需要类似于：

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

示例修复

这篇关于动画高度从底部到顶部而不是从顶部到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！