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

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

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