268

我是 jQuery 的新手,并且有一些使用 Prototype 的经验。在 Prototype 中,有一种“闪现”元素的方法——即。短暂地用另一种颜色突出显示它并让它恢复正常,以便用户的眼睛被它吸引。jQuery中有这样的方法吗?我看到了 fadeIn、fadeOut 和动画,但我没有看到像“flash”这样的东西。也许这三个之一可以与适当的输入一起使用?

4

38 回答 38

367

我的方式是 .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>

于 2012-02-01T14:19:07.350 回答
126

您可以使用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);
于 2009-07-17T21:13:25.320 回答
105

您可以使用 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");
于 2012-08-11T14:19:24.677 回答
81

5年后......(并且不需要额外的插件)

这个通过在其后面放置一个 div 背景颜色,然后将对象淡出再淡入,将其“脉冲”成您想要的颜色(例如白色)。

HTML对象(例如按钮):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery(香草,没有其他插件):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

元素- 类名

转换的第一个数字(以fadeTo()毫秒为单位)

第二个数字fadeTo()- 淡入淡出后对象的不透明度

您可以在此网页的右下角查看:https ://single.majlovesreg.one/v1/

通过使用 $(this) 和调整值来编辑(willsteel)没有重复的选择器以实际执行闪存(根据 OP 的要求)。

于 2014-04-12T12:20:28.040 回答
47

我猜你可以使用 jQuery UI 中的高亮效果来达到同样的效果。

于 2008-11-09T14:03:29.833 回答
46

如果您使用的是 jQueryUI,则pulsateUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate

于 2011-01-12T18:20:40.053 回答
18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );
于 2012-10-09T20:45:48.117 回答
16

纯 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'))
于 2015-03-11T06:48:02.413 回答
14

你可以使用这个插件(把它放在一个 js 文件中并通过 script-tag 使用它)

http://plugins.jquery.com/project/color

然后使用这样的东西:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

这为所有 jQuery 对象添加了一个“flash”方法:

$( '#importantElement' ).flash( '255,0,0', 1000 );
于 2008-11-09T14:14:42.867 回答
11

您可以通过允许迭代计数进行多次闪烁来进一步扩展李德胜的方法,如下所示:

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

然后您可以使用时间和闪烁次数调用该方法:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
于 2012-06-15T16:06:59.993 回答
8

一个非常简单的答案怎么样?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

闪烁两次……就是这样!

于 2014-02-13T17:34:56.727 回答
7

我不敢相信这还不是在这个问题上。你要做的就是:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

这完全符合您的要求,非常简单,适用于两种show()方法hide()

于 2011-09-25T22:42:49.820 回答
7

这可能是一个更新的答案,并且更短,因为自从这篇文章以来,事情已经有所巩固。需要jquery-ui-effect-highlight

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

http://docs.jquery.com/UI/Effects/Highlight

于 2013-02-11T21:07:00.870 回答
7
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);
于 2016-07-01T02:48:42.893 回答
5

会不会脉冲效应(离线)JQuery 插件是否适合您正在寻找的内容?

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


正如JP在评论中提到的,现在有 更新的脉冲插件
查看他的GitHub 存储库。这是一个演示

于 2008-11-09T14:03:00.303 回答
5

后来发现了这么多卫星,但如果有人在乎,这似乎是让某些东西永久闪烁的好方法:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
于 2013-07-22T04:51:54.950 回答
5

我一直在寻找解决此问题的方法,但不依赖 jQuery UI。

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

将您的 CSS 文件中的当前 CSS 参数设置为普通 css,并创建一个仅处理要更改的参数的新类,即背景颜色,并将其设置为 '!important' 以覆盖默认行为。像这样...

.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.  
于 2013-09-29T22:21:47.417 回答
4

以下代码对我有用。定义两个淡入淡出函数,放在彼此的回调中。

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

以下控制闪烁的次数:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);
于 2012-10-30T04:50:38.287 回答
3

如果包含一个库是多余的,这里是一个保证工作的解决方案。

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. 设置事件触发器

  2. 设置块元素的背景颜色

  3. 在 setTimeout 中使用 fadeOut 和 fadeIn 创建一点动画效果。

  4. 在第二个 setTimeout 内重置默认背景颜色

    在几个浏览器中测试,效果很好。

于 2012-06-24T01:46:34.717 回答
3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 是 3 秒

从不透明度 1 逐渐衰减到 0.3,然后到 1,依此类推。

您可以堆叠更多这些。

只需要 jQuery。:)

于 2016-09-25T17:58:27.947 回答
3

像淡入/淡出一样,您可以使用动画 css/延迟

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

简单灵活

于 2016-05-20T11:04:26.690 回答
2

不幸的是,最佳答案需要 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>
于 2014-05-12T05:00:10.467 回答
2

动画背景错误有一个解决方法。这个要点包括一个简单的突出显示方法及其使用的例子。

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231

于 2011-07-06T20:26:20.210 回答
1

这足够通用,您可以编写任何您喜欢的动画代码。您甚至可以将延迟从 300 毫秒减少到 33 毫秒并淡化颜色等。

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}
于 2015-02-22T14:10:51.500 回答
1

这将脉动元素的背景颜色,直到触发鼠标悬停事件

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}
于 2014-04-08T22:15:37.757 回答
1

只需给 elem.fadeOut(10).fadeIn(10);

于 2015-02-06T08:43:10.653 回答
1

将以上所有内容放在一起-闪烁元素并返回原始bgcolor的简单解决方案...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

像这样使用:

$('<some element>').flash('#ffffc0', 1000, 3);

希望这可以帮助!

于 2014-07-09T14:02:01.053 回答
1

这是 colbeerhey 解决方案的略微改进版本。我添加了一个 return 语句,以便在真正的 jQuery 形式中,我们在调用动画后链接事件。我还添加了参数以清除队列并跳转到动画的末尾。

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};
于 2011-12-23T22:49:27.977 回答
1

Here's a solution that uses a mix of jQuery and CSS3 animations.

http://jsfiddle.net/padfv0u9/2/

Essentially you start by changing the color to your "flash" color, and then use a CSS3 animation to let the color fade out. You need to change the transition duration in order for the initial "flash" to be faster than the fade.

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

Where the CSS classes are as follows.

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
于 2015-01-05T03:08:46.157 回答
1

您可以使用 jquery Pulsate 插件强制将注意力集中在任何 html 元素上,并控制速度、重复和颜色。

JQuery.pulsate() * 带演示

示例初始化程序:

  • $(".pulse4").pulsate({speed:2500})
  • $(".CommandBox button:visible").pulsate({ color: "#f00", speed: 200,reach: 85, repeat: 15 })
于 2017-01-16T10:38:24.757 回答
0

我正在使用这个。虽然尚未在所有浏览器上进行测试。只需按照您喜欢的方式修改即可,

用法: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。

于 2011-09-21T14:17:41.630 回答
0

最好的方法就是这样简单:

<script>

setInterval(function(){

    $(".flash-it").toggleClass("hide");

},700)
</script>
于 2014-10-08T23:51:00.243 回答
0

使用 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);
                    })
                })
            })
        })
});

通过回调完成 - 确保没有错过任何动画。

于 2015-02-03T11:25:45.447 回答
0

创建两个类,给每个类一个背景颜色:

.flash{
 background: yellow;
}

.noflash{
 background: white;
}

使用以下类之一创建一个 div:

<div class="noflash"></div>

以下函数将切换类并使其看起来正在闪烁:

var i = 0, howManyTimes = 7;
function flashingDiv() {
    $('.flash').toggleClass("noFlash")
    i++;
    if( i <= howManyTimes ){
        setTimeout( f, 200 );
    }
}
f();
于 2015-02-06T20:26:50.887 回答
0

此功能使其闪烁。它必须使用 cssHooks,因为背景颜色函数的 rgb 默认返回。

希望能帮助到你!

$.cssHooks.backgroundColor = {
get: function(elem) {
    if (elem.currentStyle)
        var bg = elem.currentStyle["backgroundColor"];
    else if (window.getComputedStyle)
        var bg = document.defaultView.getComputedStyle(elem,
            null).getPropertyValue("background-color");
    if (bg.search("rgb") == -1)
        return bg;
    else {
        bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
    }
}
}
function blink(element,blinkTimes,color,originalColor){
    var changeToColor;
    if(blinkTimes === null || blinkTimes === undefined)
        blinkTimes = 1;
    if(!originalColor || originalColor === null || originalColor === undefined)
        originalColor = $(element).css("backgroundColor");
    if(!color || color === null || color === undefined)
        color = "#ffffdf";
    if($(element).css("backgroundColor") == color){
        changeToColor = originalColor;
    }else{
        changeToColor = color;
        --blinkTimes;
    }
    if(blinkTimes >= 0){
        $(element).animate({
            "background-color": changeToColor,
        }, {
            duration: 500,
            complete: function() {
                blink(element, blinkTimes, color, originalColor);
                return true;
            }
        });
    }else{
        $(element).removeAttr("style");
    }
    return true;
}
于 2013-08-22T14:27:36.980 回答
0

您可以使用此代码 :) 更改 mili 值以更改动画速度

var mili = 300
for (var i = 2; i < 8; i++) {
   if (i % 2 == 0) {
      $("#lblTransferCount").fadeOut(mili)
   } else {
      $("#lblTransferCount").fadeIn(mili)
   }
}
于 2020-01-01T06:53:09.317 回答
0

直接jquery,没有插件。它闪烁指定的次数,在闪烁时更改背景颜色,然后将其更改回来。

function blink(target, count, blinkspeed, bc) {
    let promises=[];
    const b=target.css(`background-color`);
    target.css(`background-color`, bc||b);
    for (i=1; i<count; i++) {
            const blink = target.fadeTo(blinkspeed||100, .3).fadeTo(blinkspeed||100, 1.0);
            promises.push(blink);
    }
    // wait for all the blinking to finish before changing the background color back
    $.when.apply(null, promises).done(function() {
            target.css(`background-color`, b);
    });
    promises=undefined;
}

例子:

blink($(`.alert-danger`), 5, 200, `yellow`);
于 2019-09-25T14:52:10.233 回答
-1

您可以使用这个很酷的库对您的元素制作任何类型的动画效果:http: //daneden.github.io/animate.css/

于 2015-02-15T15:47:47.907 回答