我编写了一个非常基本的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/ 提前致谢
答案 0 :(得分:5)
您需要使用jQuery color plugin或jQuery UI(包含相同的功能)来设置颜色动画。
例如:here's your fiddle with jQuery UI included (only change) to see it working。
答案 1 :(得分:2)
jQuery中的animate()函数只会为数字css属性设置动画。 color属性的值不是数字。为了给color属性设置动画,你需要包含jQuery ui,或者像Nick提到的另一个更轻量级的插件,它将扩展jQuery对象以具有该功能。
答案 2 :(得分:1)
我想补充说,当鼠标光标重复/快速地通过元素时,几乎总是会在这种类型的动画中使用stop()来阻止不稳定的“记忆”行为。
这是更新的例子:
$(document).ready(function(){
$(".menUl li a").hover(function() {
$(this).stop().animate({color: "#c7ce95" }, 600);
},function() {
$(this).stop().animate({ color: "#807e7c" }, 400);
});
});