当鼠标悬停时为div设置动画颜色
问题描述:
当用户浏览它时,我需要更改div的颜色。当鼠标悬停时为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>
答
背景颜色动画将无法使用jQuery动画。你必须使用jQuery UI或使用jQuery颜色动画插件。
jQuery animate backgroundColor
http://www.bitstorm.org/jquery/color-animation/
http://docs.jquery.com/UI/Effects/ColorAnimations
答
你只是想改变背景颜色?
<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>
+0
不工作,任何想法,它应该做一个动画 – GibboK 2012-02-18 16:50:20
答
从jQuery的API文档:
所有动画处理的属性应该被动画化以单一数值,除了下面指出的;大多数非数字属性不能使用基本jQuery功能进行动画(例如,宽度,高度或左侧可以是动画,但背景色不能为,除非使用jQuery.Color()插件)。
也许这会有所帮助。 使用opacy e。 G。为我工作得很好。
答
$("#arrow-l").hover(
function() {
$(this).css({'background-color': '#999999'});
},
function() {
$(this).css({'background-color': '#BFBFBF'});
}
);
<div id="arrow-l">prev.</div>
感谢您的解释! – GibboK 2012-02-18 19:00:27
不客气! – 2012-02-18 19:05:15