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

Question

我认为这很容易制作，但我还没有真正习惯 jQuery，我才刚刚开始学习。

通过CSS，我们可以写一个item:hover class，写left:20px；对我们的菜单项应用轻微的滑动效果，例如<li> Item </li>

现在我想以流畅的动作实现这一点，即不是突然出现在 20 像素的右边，而是滑到那里。我认为 jQuery 中的动画东西用于此类动画，但我真的不擅长 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

使用动画（）

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

这将为<li>文档中的所有内容设置动画..您可以指定一个<li>具体的类..2000这里是动画的持续时间