動畫從底部到頂部而不是從頂部到底部的高度

取而代之的是典型的動畫，從頂部開始向下走，我怎麼能從元素的底部開始動畫，並朝向元素的頂部工作？

事件由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. 
    }); 
});

來源

2011-09-20 Michael Ecklund

我們可以看到你的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

來源

2011-09-20 18:06:57 Joe

position: absolute; 
bottom: 0px;

動畫底+ 1

您也可以使用top或margin-top負值向上移動。

來源

2011-09-20 18:02:03

不確定你的意思。 –

好的答案..他的意思是你將它定位在底部：0和絕對位置，而不是頂部（邊緣），這樣元素就會停留在底部並長大。 –

動畫，你會爲頂部至底部，但添加element.scrollTop = 99999;

這將確保底部內容是可見的（除非由於某種原因，它的高度爲100,000像素），效果將是從下到上的動畫。

來源

2011-09-20 20:41:05

不確定你的意思。 –

動畫從底部到頂部而不是從頂部到底部的高度

回答

相關問題