0

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

我正在尝试使用 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>
4

5 回答 5

2

使用 jQuery.animate()：http ://api.jquery.com/animate/

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

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

于 2013-08-14T21:27:49.317 回答
1

Here is a quick CSS example if you choose to go that route. 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;
}
于 2013-08-14T21:37:15.823 回答
1

你也可以使用 jQuery.css();

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

演示

于 2013-08-14T21:31:11.103 回答
1

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

您可以看到这里的现场演示和这里transform 的演示。top

于 2013-08-14T21:35:28.380 回答
0

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

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

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

于 2013-08-14T21:40:39.177 回答