代码之家 › 专栏 › 技术社区 › TheNone Nabster

使用jquery悬停动画

jquery

TheNone Nabster · 技术社区 · 14 年前

我写了一个非常基本的jquery脚本,理论上是正确的,但浏览器中没有:

<ul class="menUl">
  <li> <a href="#">TEMPLATE<span>DESIGN</span></a> </li>
  <li> <a href="#">FRONTEND<span>CODING</span></a> </li>
  <li> <a href="#">SERVESIDE<span>CODING</span></a> </li>
  <li> <a href="#">CONTACT<span>ME</span></a> </li>
</ul>

jQuery:

$(document).ready(function(){
  $(".menUl li a").hover(function() {
    $(this).animate({color: "#c7ce95" }, 600);
  },function() {
    $(this).animate({ color: "#807e7c" }, 400);
  });
});

我的代码有什么问题? http://jsfiddle.net/GGnb7/ 提前谢谢

3 回复 | 直到 14 年前

Nick Craver 14 年前

你需要 jQuery color plugin 或 jQuery UI (包括相同的功能)动画颜色。

举个例子: here's your fiddle with jQuery UI included (only change) to see it working .

Pizano 14 年前

jquery中的animate()函数将只对数值css属性进行动画处理。颜色属性的值不是数字。为了动画的颜色属性,您需要包括jquery用户界面,或另一个轻量级插件,如尼克提到的,这将扩展jquery对象,以具有该功能。

http://api.jquery.com/animate/ 解释一切。

hjhndr 14 年前

我想补充一下,在这种类型的动画中,当鼠标光标反复/快速地传递到元素上时,应该几乎总是使用stop()来停止不稳定的“内存”行为。

以下是更新的示例:

$(document).ready(function(){
    $(".menUl li a").hover(function() {
        $(this).stop().animate({color: "#c7ce95" }, 600);
    },function() {
        $(this).stop().animate({ color: "#807e7c" }, 400);
    });
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前