使用jQuery的动画效果在页面加载时突出显示div

Question

我有一个简单的通知系统。我想使用jQuery来通过改变背景颜色在页面加载时突出显示div，然后在500毫秒后恢复正常状态，就像在Stackoverflow上回答问题时一样。这很简单，可以引起注意。

<div id="flash">Notification</div> 

 $(function() {
    $( "#flash" ).animate({
    backgroundColor: "#aa0000",
     }, 1000 );
 });

它没有按预期工作。它无法切换回 #ffffff。

我感谢任何帮助。

- Ivanka T

Answer 1

jQuery UI有一个特定的效果，称为highlight。关于在像background-color这样的属性上使用animate的问题在这里描述：

所有动画属性都应该被动画化到单个数字值，除非另有说明；大多数非数字属性不能使用基本的jQuery功能进行动画处理。 （例如，可以动画化宽度、高度或左侧，但background-color不能。）属性值被视为像素数量，除非另有规定。适用时可以指定em和%。

编辑如果您真的不想使用jQuery UI选项，您可以通过将background-color包装成自己的元素并隐藏它来模拟类似的效果。

示例：http://jsfiddle.net/niklasvh/x2jrU/

- Niklas