我的方法是。fadein，。fadeout。fadein，。fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)} function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') } #demo1, #demo2 { text-align: center; font-family: Helvetica; background: IndianRed; height: 50px; line-height: 50px; width: 150px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="go1()">Click Me</button> <div id='demo1'>My Element</div> <br> <button onclick="go2()">Click Me</button> (from comment) <div id='demo2'>My Element</div>

你可以使用css3动画来闪现一个元素

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

并用jQuery来添加类

jQuery(selector).addClass("flash");

我正在用这个。虽然尚未在所有浏览器上测试。 按照你喜欢的方式修改它，

用法:hlight ($ (" # mydiv "));

function hlight(elementid){
    var hlight= "#fe1414"; //set the hightlight color
    var aspeed= 2000; //set animation speed
    var orig= "#ffffff"; // set default background color
    elementid.stop().css("background-color", hlight).animate({backgroundColor: orig}, aspeed);
}

注意:你需要一个jquery UI添加到你的头。

使用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。http://api.jquery.com/animate/

下面是一个普通的JQuery解决方案

http://jsfiddle.net/EfKBg/

JS

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

CSS

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

HTML

<div class="hello">Hello World!</div>

CSS支持所有主流浏览器的闪烁

.flash {
    animation: flash 0.5s ease-out;
    animation-iteration-count: 10;
}
@keyframes flash {
    0% { opacity: 0.5; }
    50% { opacity: 1.0; }
    100% { opacity: 0.5; }
}

将这个类添加到要闪光的元素中

$(elem).addClass("flash");

迭代计数:10是你想让它闪烁的次数，不需要删除类，它会自己停止闪烁。

使用不透明度:这适用于任何颜色的元素，只要它不是透明的。