使用jQuery来实现菜单文字和图标动画效果

jjfat

浏览: 284023 次
性别:
来自: 北京

最近访客更多访客>>

gdtiti

wqp310520

Csupport

jihong10102006

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery

首页 » 互联•开发 » jQuery教程 » 使用jQuery来实现菜单文字和图标动画效果

使用jQuery来实现菜单文字和图标动画效果

GBin1.com

发布时间：2011/07/25 编译：Terry li - GBin1.com 原文：tympanus.net

今天我们将讲解如何使用jQuery创建一个鼠标悬浮后有动画效果的华丽菜单。主要的想法是使得某些元素幻灯消失，改变并且动画背景颜色，然后让元素以其它颜色幻灯出现。

这个菜单的灵感来自于一个网站： http://www.pelicanhotel.com/

主要的图标来自于incrediable Noun Project，它从全世界形象语言中收集，组织并且添加了高度可识别的图标，我们可以用一种快乐而有意义的方式去分享。

现在我们开始!

HTML标签

我们的HTML将是一系列的无规则的列表，在每一个列表项目中将包含一个拥有3个我们将用来创建动画效果的元素的anchor元素：

<ul id="sti-menu" class="sti-menu">
  <li data-hovercolor="#37c5e9">
    <a href="#">
      <h2 data-type="mText" class="sti-item">
        Some text
      </h2>
      <h3 data-type="sText" class="sti-item">
        Some more text
      </h3>
      <span data-type="icon" class="sti-icon sti-icon-care sti-item">
      </span>
    </a>
  </li>
  <li>...</li>
  ...
</ul>

data-hovercolor将会被用来设置鼠标悬浮后文字的颜色。同时，我们将设置data-type属性到每一个标题和图标的span。我们将在后面的javascript使用。

接下来我们设置样式！

在线演示及其更多内容请参考原文：使用jQuery来实现菜单文字和图标动画效果

分享到：