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');

DEMO

Answer 3

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

您可以看到transform here的实时演示以及top here的演示。

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);
}
);

500 是以毫秒为单位控制动画速度。

JQuery - 在特定距离上下滑动

5 个答案: