Question

我认为这是一个很容易做到的，但我还没有真正习惯jQuery，我刚开始学习。

通过CSS，我们可以写一个项目：悬停类并写左：20px;对我们的菜单项应用轻微的滑动效果，例如<li> Item </li>

现在我希望以平稳的方式实现这一目标，即不会突然出现在20像素的右边，而是滑向那里。我认为jQuery中的animate是用于这样的动画，但我真的很擅长jQuery，我不知道在哪里以及我应该以什么顺序放置代码。你能举个简单的例子吗？：）

Answer 1

你可以在bipen的回答中指出使用jQuery。

我有一些简单的CSS来处理悬停过渡，但正如mikakun所说，这只适用于浏览器CSS3检查caniuse兼容的浏览器。

li {
    /* put your base styles here */
}

li:hover {
    /* put your new styles here */
    transition:all 300ms ease;
    -moz-transition:all 300ms ease;
    -webkit-transition:all 300ms ease;
    -o-transition:all 300ms ease;
}

这将为您为特定元素指定的任何内容进行300毫秒的转换。

如果你有一个兼容CSS3的浏览器，你可以看到这个：

http://jsfiddle.net/3leven11/7aRhe/

Answer 2

使用animate()

 $('li').hover(function(){
      $(this).animate({left:20},2000)
  },function(){
      $(this).animate({left:0},2000)
 });

这会动画文档中存在的所有<li> ..您可以将一个类<li>设为特定的。2000是此处动画的持续时间

jQuery：鼠标悬停时菜单项略微向右滑动

2 个答案: