JQuery - перемещение вверх и вниз на определенное расстояние

Question

У меня есть список, в котором элементы списка отображают встроенный блок, поэтому они горизонтальны.

Я пытаюсь использовать jquery, чтобы сместить элементы на 20 пикселей, когда они зависнут и вернутся вниз 20px, когда мышь уходит.

Точно так же как изображения продукта здесь: http://www.google.co.uk/nexus/

slideUp и slideDown не кажется, что это позволяет. Как это можно достичь?

Кроме того, если он обеспечивает более плавный эффект, я был бы открыт для использования перехода css, но опять же, я не знаю, как это сделать.

Моя разметка выглядит следующим образом:

<div> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

Answer 1

Использование jQuery.animate():

$("element").animate({marginTop : "-20px"}, 500); 

Вот скрипку из CSS трансформирует подход (без JavaScript), используя пример разметки, представленную samrap: http://jsfiddle.net/qAeFH/

Answer 2

Вы также можете использовать jQuery.css();

$('#menu').css('top', '0px'); 

DEMO

Answer 3

Я думаю, что JS является overkilled для выполнения этой задачи. Вы можете просто использовать CSS. Хитрость заключается в изменении свойств top или transform: translate. В первом случае вам, вероятно, понадобится position:relative.

Вы можете увидеть демонстрационную версию игры transformhere и демо-версию tophere.

Answer 4

Вот пример быстрого CSS, если вы решите пойти по этому маршруту. http://jsfiddle.net/7hZkG/4/

#slide-up li{ 
    display:inline-block; 
    position:relative; 

    -webkit-transition: all 100ms ease-in-out; 
    -moz-transition: all 100ms ease-in-out; 
    -o-transition: all 100ms ease-in-out; 
    transition: all 100ms ease-in-out; 

    top:0px; 
} 

#slide-up li:hover{ 
    top:-10px; 

    -webkit-transition: all 100ms ease-in-out; 
    -moz-transition: all 100ms ease-in-out; 
    -o-transition: all 100ms ease-in-out; 
    transition: all 100ms ease-in-out; 
} 

Answer 5

Чтобы добавить этот эффект на каждый элемент списка с помощью JQuery, вы можете сделать следующее:

$("li").hover(function() { 
    $(this).animate({marginTop: "-20px"}, 500); 
}, 
function() { 
    $(this).animate({marginTop: "0"}, 500); 
} 
); 

это контролировать скорость анимации в миллисекундах.