jQuery淡入背景颜色属性鼠标悬停？

Question

我有一小段代码不起作用，看看：

$(document).ready(function() {
    $('ul#mainmenu li:hover').css({backgroundColor:''});
    $('ul#mainmenu li').hover(function() {
        $(this).animate({backgroundColor:'#2E8AE5'}, slow);
    });
});

这段代码的作用是：

1) 在id为mainmenu的无序列表中，取消带有伪类:hover的列表项的CSS属性background-color（这样没有启用Javascript的用户仍然可以体验我想通过jQuery实现的类似效果）

2) 当鼠标悬停在同一列表项上时，应该在该列表项上动画显示background-color。

但它并没有达到预期效果。第一个任务甚至都没有完成，更别说在鼠标悬停时动画显示背景色了。值得注意的是，我已经三次检查了我的元素（我甚至复制并粘贴到脚本中进行确认）。

而且我正在使用jQuery UI - 我知道它可以执行涉及动画某些CSS属性的任务。有什么想法？

- marked-down

Answer 1

如之前所提到的那样...使用颜色插件。

http://jsfiddle.net/Mb6Nd/

$(document).ready(function() {
    var lis = $('#mainmenu > li');
    $(lis).hover(
        function() {
            $(this).animate({backgroundColor:'#2E8AE5'}, 'slow');
        },
        function(){
            $(this).animate({backgroundColor:'#cecece'}, 'fast');
        }
    );
});

- Tim Vermaelen

---

这个很好用，但是我的起始颜色是透明的，这不适用于透明的起始颜色，而且它会影响子元素（子菜单）- 所以实际上，这并不是我想要的。 - marked-down

Answer 2

将目标id更改为#mainmenu>li，将只影响父级li而不是子级li。还可以尝试backgroundColor：'transparent！important'

请尝试以下内容：

$(document).ready(function() {
    var $lis=$('#mainmenu > li');
    $lis.css({backgroundColor:'transparent !important'});
    $lis.hover(function() {
       $(this).animate({backgroundColor:'#2E8AE5'}, 'slow');
    });
});

- Lee

Answer 3

编辑

应该是'background-color'，而不是backgroundColor。即：

$(this).animate({'background-color':'#2E8AE5'}, "slow");

---

速度的参数应该是字符串或数字。例如："slow" 或 10000（毫秒）。

例子：

$(this).animate({backgroundColor:'#2E8AE5'}, "slow");

或者

$(this).animate({backgroundColor:'#2E8AE5'}, 1000); // in millisecs

- techfoobar

---

啊，这是一个深夜 - 我应该注意到这个问题，但是它并不能解决我的问题。 - marked-down

"backgroundColor"是jQuery中有效的CSS属性，正如Tim的回答所示，但遗憾的是，这并不能解决我的问题。 - marked-down

Answer 4

我认为使用像颜色动画jQuery插件这样的插件来淡化背景颜色、前景颜色和边框颜色是最好的解决方案。

使用：

<\script type="text/javascript" src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js">

(删除反斜杠)。

在输入上述代码之后，如下所示。

$('#demodiv').animate({backgroundColor: '#400101'});

更多参考请点击此处

- Biju B Adoor

Answer 5

这个行吗？：

$(document).ready(function() {
    var $lis=$('#mainmenu li');
    $lis.css({backgroundColor:'#aaa'});
    $lis.hover(function() {
       $(this).animate({backgroundColor:'#2E8AE5'}, 'slow');
    });
});

- bingjie2680

---

其实，我刚才尝试把第一个背景颜色设置为#AAA而不是空白，结果成功了！！！:D 但是，有没有什么办法可以最初将“background-color”设置为无色？因为在鼠标滑过之前预设颜色会破坏它的外观。谢谢。 - marked-down

此外，它也影响了该菜单内的子菜单。有没有办法仅将动画应用于特定元素，而不是继承它的子元素？ - marked-down

@Antilogical13 你可以使用 background-color:inherit;。 - henryaaron