Question

我编写了一个非常基本的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/ 提前致谢

Answer 1

您需要使用jQuery color plugin或jQuery UI（包含相同的功能）来设置颜色动画。

例如：here's your fiddle with jQuery UI included (only change) to see it working。

Answer 2

jQuery中的animate（）函数只会为数字css属性设置动画。 color属性的值不是数字。为了给color属性设置动画，你需要包含jQuery ui，或者像Nick提到的另一个更轻量级的插件，它将扩展jQuery对象以具有该功能。

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

Answer 3

我想补充说，当鼠标光标重复/快速地通过元素时，几乎总是会在这种类型的动画中使用stop（）来阻止不稳定的“记忆”行为。

这是更新的例子：

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

用jquery悬停动画

3 个答案: