Question

我试图让我的ul li的背景颜色变黄然后变回白色。我使用下面的代码，但它不起作用。

$('#items ul li.test').animate({ 'background-color' : '#FFFEBC' },  3000, function(){
  $('#items ul li.test').animate({ 'background-color' : '#ffffff' }, 3000);
});

我当然包含了jQuery库，而这段代码是由另一个函数触发的。该功能有效，但不是动画。

.test是ul li类。

代码有问题吗？

Answer 1

来自documentation：

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本的jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画但背景颜色不能，除非使用jQuery.Color（）插件）。除非另有说明，否则属性值被视为多个像素。可以在适用的情况下指定单位em和％。

因此请使用它告诉您使用的插件。

Answer 2

jQuery本身不支持动画颜色;请参阅animate docs。

jQuery UI adds the ability为其设置颜色动画。但是，如果你没有将它用于其他任何事情，那将是一件大事。： - ）

还有一些其他插件可以添加颜色动画，例如this one;如果你进行搜索，你应该找到几个选项供你选择。

Answer 3

使用jquery UI和突出显示方法来激活此效果。

一旦你有了jquery UI，

只需使用高光效果

即可

$('#items ul li.test').effect('highlight');

如果您需要，可以从jquery UI下载构建器

下载仅高亮效果

Answer 4

嗯，你的代码似乎没有任何错误..但是你可能已经为ID设置了CSS类（#items）;可能会覆盖你的背景颜色。

为了您的帮助，我刚刚从HTML中删除了ID和Class，它工作正常!!见下文......

<强> HTML

<ul>
    <li>123</li>
     <li>456</li>
</ul>

jQuery代码（我使用过（文档）.ready（） - 在你的情况下，你正在处理事件。

   $(document).ready(function(){
        $('ul li').animate({ 'background-color' : '#FFFEBC' },  500, 
         function(){ $('ul li').animate({ 'background-color' : '#CCCCCC' }, 500,
         function(){ $('ul li').animate({ 'background-color' : '#ffffff' }, 500);
       });
   });}
);

希望这有帮助！

Answer 5

试试这段代码

$（'＃items ul li.test'）。animate（{'backgroundColor'：'＃FFFEBC'}，3000，function（）{ $（'＃items ul li.test'）。animate（{'backgroundColor'：'＃fffffff'}，3000）; }）;

我没有测试过，但它可能有用。

动画为淡黄色然后又变回白色？ jQuery的

5 个答案: