JQuery: оживить головоломку

Question

У меня проблемы с анимацией в jQuery ...

У меня есть нижний колонтитул со скрытым тегом сверху. Когда кто-то нажимает кнопку рядом с заголовком, div должен анимировать UP. Вроде как скользит вверх, словно вы вытаскиваете папку манилы из ящика. (Не обычный слайд вверх, где нижняя часть div скользит вверх до верха.)

Я нашел этот фрагмент кода, который мне нужен, однако он перемещает базовую линию (нижний колонтитул).

.featureBox{width:182px;
    height:150px;
    position:relative;
    border:1px solid red;
}

$('.featureBox').hover(function()  {
    $(this).animate({top:'-320px', height:'540px'},"slow");
},
function() {
    $(this).animate({top:'0px', height:'150px'},"slow");
})

При наведении курсора на красную рамку div вы увидите, что div под ней сдвигается вниз. Как мне заставить его просто оживить или повзрослеть? (Хе-хе. Извини. Просто подумал, что мама на меня кричит).

Answer 1

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

Посмотрите код для плагина Wordpress Sexybookmarks , чтобы получить хороший пример такая хитрость.

Answer 2

Я предполагаю, что твое исправление - одна из этих двух вещей:

<Ол>

Изменить позицию: относительно позиции: абсолютная

Вы на самом деле не хотите перемещать .featureBox, а скорее другой элемент внутри .featureBox (возможно, DIV)