Question

我有一小段无效的代码，请看一下：

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

这意味着：

1）从无序列表中具有伪类background-color的列表项中取消设置CSS属性:hover，其中id为mainmenu（这样，那些没有启用Javascript的人仍然会遇到类似的对我想用jQuery实现的效果）

2）当相同的列表项被悬停时，它应该在所述列表项的背景颜色中设置动画。

但事实并非如此。相反，第一个任务甚至没有完成，更不用说在悬停时在后台制作动画。值得注意的是，我已经对我的元素进行了三次检查（我甚至将它们复制并粘贴到脚本中以确保）。

我正在使用jQuery UI - 据我所知，它可以执行涉及动画某些CSS属性的任务。想法？

Answer 1

作为mentioned before ...使用颜色插件

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');
        }
    );
});

Answer 2

将目标ID更改为#mainmenu＆gt; 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');
    });
});

Answer 3

修改

它应该是'背景颜色'。不是backgroundColor。即。

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

速度参数应为字符串或数字。例如：“慢”或10000（毫秒）。

例如：

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

或

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

Answer 4

这有用吗？：

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

Answer 5

我认为这是褪色背景色，前色和边框颜色使用插件的最佳解决方案，如color animation jQuery plugin，

使用：

＆lt; \ script type =“text / javascript”src =“http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js”＆gt;

（删除反斜杠）。

并输入之前的代码。喜欢。

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

更多参考click here

悬停时jquery在背景颜色属性中淡出？

5 个答案: