jQuery鼠标悬停动画菜单

鼠标悬浮的菜单动画，用 jQuery 做其实还挺。就像这个资源，用

配
• 搞出结构，用mouseenter和mouseleave加点animate，动效立马就有了。响应也快，兼容性也不错，适合想快速加点交互动效的场景。

  菜单项放大是个蛮直观的效果，比如你想让用户知道鼠标悬停了哪一项，就可以在 hover 的时候加个字体放大动画，代码也不复杂：

  $(document).ready(function() {
    $('#menu li').mouseenter(function() {
      $(this).animate({ fontSize: '20px' }, 200);
    }).mouseleave(function() {
      $(this).animate({ fontSize: '14px' }, 200);
    });
  });

  结构方面也简单，直接用一个无序列表搞定：

  <ul id="menu">
    <li><a href="#">菜单 1</a></li>
    <li><a href="#">菜单 2</a></li>
    <li><a href="#">菜单 3</a></li>
  </ul>

  要让它横着排？给#menu li加上float: left就行了：

  #menu li {
    float: left;
    margin-right: 10px;
  }

  如果你想玩得再炫一点，可以配合fadeIn、slideToggle或者 CSS3 的transform做旋转、缩放都行。动画多点变化，体验就不那么死板。

  包里的文件名像texiao351_1560680927这种，一看就知道是从特效资源里解压出来的，里头应该有 HTML、CSS、JS 分得挺清楚，照着改基本都能跑。

  如果你想直接试下效果，可以看看这个资源：jQuery 动画效果悬浮菜单.zip，或者想了解更多样式的，也可以翻下这些：

  • 鼠标悬浮显示二级菜单效果的 jquery 实现
  • 鼠标悬浮事件 onmouseoveronmouseout
  • 57Jquery 鼠标滚动事件动画
  • 鼠标事件鼠标经过显示悬浮层

  ，这种小动画挺适合放在导航栏、卡片组件、按钮组上。要是你做企业站、作品集或者电商首页，加点这类交互，体验马上就不一样了。