jQuery backgroundColor动画 [英] jQuery backgroundColor animation
问题描述
我有一个带链接和SPAN的DIV.
I have a DIV with a link and a SPAN.
单击链接时,它将使用AJAX呈现项目列表.单击一个项目后,SPAN的内容就会更改.
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.
我想通过将DIV的背景色设置为绿色,然后使用jQuery将其动画化为白色来突出显示此更改.
I want to highlight this change, by setting the background-color of the DIV to green, and animating it back to white using jQuery.
var originalColor = elementToUpdate.parentNode.style.backgroundColor;
elementToUpdate.style.backgroundColor = 'green'; //lastSender.style.color;
jQuery(elementToUpdate.id).animate({ backgroundColor: '#ffffff' }, 1000);
SPAN的背景在第二行更改为绿色,但第三行不执行任何操作.没有错误,也没有改变...
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...
有什么想法吗?
编辑:如Ted Naleid在以下评论中所述:
As noted by Ted Naleid in a comment below:
还请注意,您必须拥有 为安装了彩色动画插件 这个工作 ( http://plugins.jquery.com/project/color ), 如果您尚未安装,则使用jQuery 不能为颜色设置动画,只能是数字 属性(至少从1.3.1开始).
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).
推荐答案
如果已有元素,则不需要.id
.将其直接传递给jQuery:
You don't need the .id
if you already have the element. Hand it directly to jQuery:
jQuery(elementToUpdate).animate({ backgroundColor: '#ffffff' }, 1000);
您不会收到错误,因为elementToUpdate.id
是一个字符串,jQuery(可能)将其解释为选择器.它只是碰巧没有选择任何东西的选择器.
You don't get an error because elementToUpdate.id
is a string, which jQuery (probably) interprets as a selector. It just happens to be a selector that doesn't select anything.
或者,您可以这样说来使其成为有效的选择器:
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.
这篇关于jQuery backgroundColor动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!