events - 使用 jquery animate 在加载时突出显示 div

Question

我有一个简单的通知系统。我想使用jquery通过改变背景颜色来突出显示div onload，并在500ms后恢复正常，只是一闪。与我们在 Stackoverflow 上回答问题时类似。简单到足以吸引注意力。

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

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

它没有按预期工作。它不会切换回#ffffff。

我很感激任何帮助。

Answer 1

jQuery UI 对此有一个特定的效果，称为 highlight 。 here 描述了在 background-color 等属性上使用 animate 的问题。 :

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

编辑如果您确实不想使用 jQuery UI 选项，您可以通过将 background-color 包装到其自己的元素中来模拟类似的效果，隐藏起来。

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