我认为这很容易制作,但我还没有真正习惯 jQuery,我才刚刚开始学习。
通过CSS,我们可以写一个item:hover class,写left:20px;对我们的菜单项应用轻微的滑动效果,例如<li> Item </li>
现在我想以流畅的动作实现这一点,即不是突然出现在 20 像素的右边,而是滑到那里。我认为 jQuery 中的动画东西用于此类动画,但我真的不擅长 jQuery,我不知道应该在哪里以及以什么顺序放置代码。你能给我一个简单的例子吗?:)
您可以按照 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 的浏览器,你可以看到这个:
使用动画()
$('li').hover(function(){
$(this).animate({left:20},2000)
},function(){
$(this).animate({left:0},2000)
});
这将为<li>
文档中的所有内容设置动画..您可以指定一个<li>
具体的类..2000
这里是动画的持续时间