JQuery-上下滑动特定距离

Question

我有一个列表，其中的列表项显示为内联块，因此它们是水平的。

我试图使用jquery在元素悬停时向上滑动20px，在鼠标离开时向后滑动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（）：http://api.jquery.com/animate/

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

以下是使用samrap提供的示例标记的CSS转换方法（无javascript）：http://jsfiddle.net/qAeFH/

Answer 2

您也可以使用jQuery.css（）；

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

演示

Answer 3

如果您选择走这条路，这里有一个快速的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 4

我认为JS在这个任务上做得太过火了。你可以简单地使用CSS。诀窍是更改top或transform: translate属性。在第一种情况下，您可能需要position:relative。

您可以在此处看到transform的实时演示，在此处可以看到top的演示。

Answer 5

要使用jQuery在每个列表项上添加此效果，可以执行以下操作：

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

500用于控制动画速度（以毫秒为单位）。