jQuery鼠标悬停导航底部动画效果

效果背景：

我无意中在网上看到了一个非常有创意的导航效果。虽然效果不是很酷，但也有点提神。

所以我模仿并写了一个最喜欢的童鞋来使用。

实施原则：

主要使用jQuery悬停和动画属性

默认情况下，每个li标记底部都有一个宽度为0的范围标记

当鼠标悬停在li上时，里面的跨度标签从中间向两边扩展，时间设置为0.2秒。

移除鼠标后，跨度宽度再次变为0

jQuery代码中有一个200的值，这意味着0.2秒。值越高，速度越慢。

用法：

1.将css样式引入您的网页

2.将正文中的代码部分复制到您需要的位置