Анимированная высота снизу вверх вместо сверху вниз - PullRequest
Новая
       12

Анимированная высота снизу вверх вместо сверху вниз

2 голосов
/ 20 сентября 2011

Как добиться анимации высоты в обратном порядке?

Вместо обычной анимации, начинающейся сверху и направленной вниз, как я могу запустить анимацию с нижней части элемента и продвинуться вверх к вершине элемента?

Событие инициируется 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; 
}

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

Ответы [ 3 ]

2 голосов
/ 20 сентября 2011

Вы div и ваши теги a имеют одинаковый идентификатор. У них должны быть уникальные идентификаторы. 

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

должно быть что-то вроде: 

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

Пример исправления

1 голос
/ 20 сентября 2011 
position: absolute;
bottom: 0px;

одушевленное дно + 1.

Вы также можете использовать отрицательные значения для top или margin-top для перемещения вверх.

0 голосов
/ 21 сентября 2011

Анимируйте, как если бы это было сверху вниз, но добавьте element.scrollTop = 99999;

Это обеспечит видимость нижней части содержимого (если только по какой-то причине его высота составляет 100 000 пикселей), а эффект будет анимацией снизу вверх.

...