0

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

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

现在我想以流畅的动作实现这一点,即不是突然出现在 20 像素的右边,而是滑到那里。我认为 jQuery 中的动画东西用于此类动画,但我真的不擅长 jQuery,我不知道应该在哪里以及以什么顺序放置代码。你能给我一个简单的例子吗?:)

4

2 回答 2

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/

于 2013-04-15T05:07:35.450 回答
0

使用动画()

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

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

于 2013-04-15T04:52:50.767 回答