当鼠标悬停时为div设置动画颜色

我正在尝试的这个脚本不起作用。任何想法如何解决它？

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $("#arrow-l").hover(
    function() { 
     $(this).stop().animate({"background-color": "#999999"}, "slow"); 
    }, 
    function() { 
     $(this).stop().animate({"background-color": "#BFBFBF"}, "slow"); 
    }); 
    </script> 
    </head> 
... 
    <body> 
    <div id="arrow-l">prev.</div>

来源

2012-02-18 GibboK

背景颜色动画将无法使用jQuery动画。你必须使用jQuery UI或使用jQuery颜色动画插件。

jQuery animate backgroundColor

http://www.bitstorm.org/jquery/color-animation/
http://docs.jquery.com/UI/Effects/ColorAnimations

来源

2012-02-18 16:44:46

感谢您的解释！ – GibboK 2012-02-18 19:00:27

不客气！ – 2012-02-18 19:05:15

你只是想改变背景颜色？

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
$(function() { 
    $('#arrowl').hover(function(){ 
     $(this).css('background-color', '#F00'); 
    }, 
    function(){ 
     $(this).css('background-color', '#E0EAF1'); 
    }); 
}); 

    </script> 
    </head> 
... 
    <body> 
    <div id="arrowl">prev.</div>

来源

2012-02-18 16:46:28 June

不工作，任何想法，它应该做一个动画 – GibboK 2012-02-18 16:50:20

从jQuery的API文档：

所有动画处理的属性应该被动画化以单一数值，除了下面指出的;大多数非数字属性不能使用基本jQuery功能进行动画（例如，宽度，高度或左侧可以是动画，但背景色不能为，除非使用jQuery.Color（）插件）。

也许这会有所帮助。使用opacy e。 G。为我工作得很好。

来源

2012-02-18 16:49:17 m02ph3u5

-1

参考LIVE DEMO AT JSFIDDLE

$("#arrow-l").hover(
    function() { 
     $(this).css({'background-color': '#999999'}); 
    }, 
    function() { 
     $(this).css({'background-color': '#BFBFBF'}); 
    } 
); 


<div id="arrow-l">prev.</div>

来源

2012-02-18 18:15:20

当鼠标悬停时为div设置动画颜色

回答

相关问题