你可以使用jQuery Color插件。

例如，为了吸引人们对你页面上所有div的注意，你可以使用以下代码:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

编辑-新的和改进

下面使用与上面相同的技术，但它有额外的好处:

参数化的高亮颜色和持续时间 保留原来的背景色，而不是假设它是白色 是jQuery的扩展，所以你可以在任何对象上使用它

扩展jQuery对象:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

使用的例子:

$("div").animateHighlight("#dd0000", 1000);

使用jQuery 1.10.2，这个脉冲两次下拉菜单，并将文本更改为错误。它还存储已更改属性的值以恢复它们。

// shows the user an error has occurred
$("#myDropdown").fadeOut(700, function(){
    var text = $(this).find("option:selected").text();
    var background = $(this).css( "background" );

    $(this).css('background', 'red');
    $(this).find("option:selected").text("Error Occurred");

        $(this).fadeIn(700, function(){
            $(this).fadeOut(700, function(){
                $(this).fadeIn(700, function(){
                    $(this).fadeOut(700, function(){

                        $(this).find("option:selected").text(text);
                        $(this).css("background", background);
                        $(this).fadeIn(700);
                    })
                })
            })
        })
});

通过回调完成-以确保没有动画丢失。

我正在寻找这个问题的解决方案，但不依赖jQuery UI。

这就是我想出的，它为我工作(没有插件，只是Javascript和jQuery); -这是工作小提琴- http://jsfiddle.net/CriddleCraddle/yYcaY/2/

在你的CSS文件中设置当前的CSS参数为普通的CSS，并创建一个新类，只处理参数的变化，即background-color，并将其设置为'!“重要”来覆盖默认行为。像这样…

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

然后只需使用下面的函数并将DOM元素作为一个字符串传递，一个表示您希望flash发生次数的整数，一个表示您希望更改到的类的整数，以及一个表示延迟的整数。

注意:如果你为'times'变量传递一个偶数，你将得到你开始时的类，如果你传递一个奇数，你将得到被切换的类。两者都有不同的用途。我用“I”来改变延迟时间，否则它们会同时发射，效果就会丢失。

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

你可以使用jquery的pulse插件来强制将注意力集中在任何html元素上，控制速度、重复和颜色。

jquery . pulse() *带有演示

样本初始化:

$ (" .pulse4 ") .pulsate({速度:2500}) $("。CommandBox按钮:可见”)。脉动({颜色:“#f00”，速度:200，达到:85，重复:15})

纯jQuery解决方案。

(不需要jquery-ui/animate/color)

如果你想要的是黄色的“闪光”效果，而不加载jquery颜色:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

上面的脚本简单地做了1s黄色淡出，非常适合让用户知道元素被更新或类似的事情。

用法:

flash($('#your-element'))

一个脉冲效果(离线)JQuery插件适合你正在寻找什么?

您可以添加一个持续时间，以便及时限制脉冲效果。

正如J-P在评论中提到的，现在有他更新的脉冲插件。 见他的GitHub回购。这是一个演示。