jQuery backgroundColor 动画

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/425082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:07:43  来源:igfitidea点击:

jQuery backgroundColor animation

jqueryanimation

提问by MartinHN

I have a DIV with a link and a SPAN.

我有一个带有链接和 SPAN 的 DIV。

When clicking the link, it renders a list of items by using AJAX. When an item is clicked, the content of the SPAN is changed.

单击链接时,它会使用 AJAX 呈现项目列表。单击某个项目时,SPAN 的内容会更改。

I want to highlight this change, by setting the background-color of the DIV to green, and animating it back to white using jQuery.

我想通过将 DIV 的背景颜色设置为绿色,并使用 jQuery 将其动画恢复为白色来突出显示此更改。

  var originalColor = elementToUpdate.parentNode.style.backgroundColor;
  elementToUpdate.style.backgroundColor = 'green'; //lastSender.style.color;
  jQuery(elementToUpdate.id).animate({ backgroundColor: '#ffffff' }, 1000);

The background of the SPAN is changed to green on the 2nd line, but the 3rd line doesn't do anything. No errors, or changes what so ever...

SPAN 的背景在第 2 行变为绿色,但第 3 行没有任何作用。没有错误,或改变什么...

Any ideas?

有任何想法吗?



Edit:As noted by Ted Naleid in a comment below:

编辑:正如 Ted Naleid 在下面的评论中所指出的:

Also note that you have to have the color animations plugin installed for this to work (http://plugins.jquery.com/project/color), if you don't have it installed, jQuery can't animate colors, only numeric properties (at least as of 1.3.1).

另请注意,您必须安装颜色动画插件才能使其工作(http://plugins.jquery.com/project/color),如果您没有安装它,jQuery 不能动画颜色,只有数字属性(至少从 1.3.1 开始)。

回答by Adam Bellaire

You don't need the .idif you already have the element. Hand it directly to jQuery:

.id如果您已经拥有该元素,则不需要。直接将其交给 jQuery:

jQuery(elementToUpdate).animate({ backgroundColor: '#ffffff' }, 1000);

You don't get an error because elementToUpdate.idis a string, which jQuery (probably) interprets as a selector. It just happens to be a selector that doesn't select anything.

您不会收到错误,因为elementToUpdate.id是一个字符串,jQuery(可能)将其解释为选择器。它恰好是一个不选择任何东西的选择器。

Alternatively, you can say this to make it a valid selector:

或者,您可以这样说以使其成为有效的选择器:

jQuery('#' + elementToUpdate.id).animate({ backgroundColor: '#ffffff' }, 1000);

But I think the first form is preferable since you already have the element itself.

但我认为第一种形式更可取,因为您已经拥有元素本身。