Слайд-элемент списка с jQuery без использования других элементов списка

Question

Я пытаюсь скопировать элемент списка и показать больше содержимого, которое кажется скрытым «под» элементом списка, но когда происходит анимация, все остальные элементы списка сбрасываются немного. Когда я удаляю содержимое под элементом списка, но оставляю анимацию, все работает нормально.

Как я могу сделать эту работу без использования других элементов в списке?

Это трудно для меня, чтобы объяснить это, так вот скрипку, о чем я говорю: http://jsfiddle.net/YNBxz/1377/

мыши на любом из блоков в секции просмотра, чтобы увидеть анимацию.

Если вы закомментируете jQuery(this).children('.block-content').slideToggle(500);, вы можете увидеть, как он должен выглядеть во время анимации.

Answer 1

Вам необходимо изменить расположение .block-content на position: absolute. Это позволит зафиксировать скользящие другие элементы li. Затем, чтобы зафиксировать позиционирование .block-content, снимите width: 100%, измените правильное положение на right: 0 и добавьте top: 45px. CSS для .block-content тогда:

.block-content { 
    font-size: 12px; 
    font-family: Helvetica, sans-serif; 
    display: block; 
    background: #333; 
    padding: 10px; 
    position: absolute; 
    top: 45px; 
    right: 0px; 
    height: 120px; 
} 

Кроме того, если вы хотите в нижней части .block-content к линии вверх с нижней части li-х, изменить JQuery для анимации в 140px, а не 115px.

Вы можете увидеть результаты: http://jsfiddle.net/YNBxz/1379/