< a href = " http://enhance.qd-creative.co。Uk /demos/pulse/" rel="nofollow noreferrer">脉冲效果 .(脱机)JQuery插件适合你正在寻找什么?

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

正如< a href = " https://stackoverflow.com/users/21677/j-p " > j] < / >在注释中提到的，现在有他的 更新脉冲插件.
. > 见他的GitHub回购。这里是一个演示.

你可以使用jQuery UI中的突出的效果来实现同样的效果，我猜。

你可以使用这个插件(把它放在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 );

你可以使用jQuery彩色插件。

例如，为了吸引人们对你页面上所有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);

如果你正在使用jQueryUI，在UI/Effects中有pulsate函数

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

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

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

/* 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

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

用法: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添加到你的头。

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

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

这完全是你想要它做的，超级简单，适用于show()和hide()方法。

这是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);
};

我的方法是。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>

你可以进一步扩展Desheng Li的方法，允许迭代计数进行多次闪光，如下所示:

// 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

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

$('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中使用淡出和淡出来创建一个小动画效果。

4. 内秒setTimeout重置默认背景色

   在一些浏览器中进行了测试，效果很好。

你可以使用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");

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

下面的代码对我有用。定义两个渐入渐出函数，并将它们放在彼此的回调函数中。

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);

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

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

http://docs.jquery.com/UI/Effects/Highlight < a href = " http://docs.jquery.com/UI/Effects/Highlight " > < / >

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

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


setInterval(function(){
$( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},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;
}

我正在寻找这个问题的解决方案，但不依赖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.

一个简单的答案如何?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',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;
}

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

这个函数通过后面的添加div背景颜色将它“脉冲”到你想要的颜色(例如白色)，然后再将淡出对象输出和输入。

超文本标记语言对象(例如按钮):

<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/

编辑 (willsteel)没有重复的选择器，使用$(this)和调整值来实际执行一个flash(如OP请求)。

不幸的是，上面的答案需要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%;
}

超文本标记语言

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

把上面所有的这些放在一起——一个简单的闪光元素的解决方案，并返回到原始的bgcolour…

$.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);

希望这能有所帮助!

最简单的方法是这样做:

<script>


setInterval(function(){


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


},700)
</script>

下面是一个混合使用jQuery和CSS3动画的解决方案。

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

从本质上讲，你首先将颜色更改为“闪光”颜色，然后使用CSS3动画让颜色逐渐消失。你需要改变过渡持续时间，以使初始的“闪光”比淡出更快。

$(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);

其中CSS类如下所示。

.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;
}

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

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

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

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

.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();

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

这是足够通用的，你可以编写任何你想要动画的代码。您甚至可以将延迟从300ms减少到33ms，并退色等。

// 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();
}

纯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'))

像淡入/淡出，你可以使用动画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);

简单灵活

function pulse() {
$('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1);

3000是3秒

从不透明度1淡出到0.3，然后是1，依此类推。

你可以叠更多。

只需要jQuery。：）

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

JQuery.pulsate () ^{* with Demos}

样本初始化:

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

直接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`);

你可以使用这个代码:) 更改mili值更改动画速度

var mili = 300
for (var i = 2; i < 8; i++) {
if (i % 2 == 0) {
$("#lblTransferCount").fadeOut(mili)
} else {
$("#lblTransferCount").fadeIn(mili)
}
}

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是你想让它闪烁的次数，不需要删除类，它会自己停止闪烁。

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