如何在jQuery中使元素“闪光”


249

我是jQuery的新手,并且具有使用Prototype的经验。在Prototype中,有一种方法可以“刷新”元素-即。短暂地用另一种颜色突出显示它,并使它褪色恢复正常,以便吸引用户的眼球。jQuery中有这种方法吗?我看到了fadeIn,fadeOut和动画效果,但是看不到“ flash”之类的东西。也许这三者之一可以与适当的输入一起使用?


4
这不能回答OP,但是(经过宽松测试)的代码可能对将来的Google搜索者(例如我自己)有用:$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter 2012年

3
将此CSS添加到element:中text-decoration:blink,然后将其删除。
Dementic


我在这里放置了一个JSFiddle演示,它比在此页面上找到的答案更好:stackoverflow.com/a/52283660/470749
Ryan

请注意,眨眼动画已正式弃用。查看以下
网址

Answers:


317

我的方式是.fadein,.fadeout .fadein,.fadeout ......

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


14
这不是最漂亮的解决方案,但简短易懂,并且不需要UI /效果。真好!
克里斯·杰恩斯

21
我使用淡入,淡出序列之前的延迟时间,例如$('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

1
闪烁的背景通常看起来很俗气,或者只是普通的震颤-尤其是如果您要闪烁的项目坐在纯白色的背景上。第一添加颜色插件,并试图闪光的背景等先试这个
Simon_Weaver

4
这种方法的问题在于这些事件可能会相互加剧。您可能应该将每个后续的fadeIn和fadeOut分别放在各自的回调中。例如: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
thekingoftruth 2013年

当心在可能经常调用的验证代码中使用此代码。如果在正确的时机调用了代码,则可能会显示一个元素,表明何时该不该(反之亦然)
Chris Pfohl 2014年

122

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

4
也不适合我-您确定这不依赖于彩色动画插件吗?plugins.jquery.com/project/color
UpTheCreek 2010年

18
来自.animate()上的jQuery文档:所有动画属性都应为单个数字值(以下所述除外);非数字属性不能使用基本的jQuery功能设置动画。(例如,宽度,高度或左边可以设置动画,而背景颜色不能设置动画。)因此,我想您是在利用一个插件而没有意识到这一点。
UpTheCreek 2010年

4
我注意到它没有返回对象。我尝试堆叠这种小的效果(例如:$(“#qtyonhand”)。animateHighlight(“#c3d69b”,1500).delay(1500).animateHighlight(“#76923C”,5000);),但出现了错误。我需要添加“返回此”;到方法的最后
Sage

2
官方jQuery文档说,您必须使用jQuery.Color()插件才能工作:github.com/jquery/jquery-color
jchook 2012年

3
从jquery .animate文档中:Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.-如果要对颜色进行动画处理,则需要jQuery UI或其他插件。
亚当·托马特

101

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

不错的解决方案,如果它只需要工作一次。添加类后,(逻辑上)添加类不会导致闪存元素的闪烁。
simon

7
有史以来最好的主意。我用settimeout在效果生效后2秒钟删除了课程
签署

6
这是在动画制作完成后删除类的示例,您可以继续刷新它。jsfiddle.net/daCrosby/eTcXX/1
DACrosby 2014年

很好,可以用,但是请注意,如果要传递样式表验证器,则background-color的正确属性是“ transparent”而不是“ none”。
1

1
请注意,所有现代浏览器现在都支持常规@keyframesanimation规则,因此除了(对于Blackberry浏览器)也许 不需要使用任何带前缀的版本-webkit-
coredumperror

74

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()之后淡入淡出/ unfade所述对象的不透明度-

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

通过使用$(this)并调整值以自动执行刷新(根据OP的要求)来编辑(将钢)没有重复的选择器。


60
fadeTo(0000)-Metallica
火神乌鸦

2
像黄油一样光滑!最好的解决方案。谢谢!
ColdTuna 2015年

1
如何做到无限?
tomexsans

1
示例链接断开。
网状

1
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}然后,您可以像这样称呼它$('#mydiv').flashUnlimited();-它执行了Majal的上述回答,并在周期结束时再次自称。
杰伊·达德尼亚


45

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

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

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


1
@DavidYell,打开一个新问题并发布一些示例代码。 pulsate在Chrome中正常运行。
SooDesuNe

每5秒闪烁一次:setInterval(function(){$(“。red-flag”)。effect(“ pulsate”,{times:3},2000);},5000);
Adrian P.

@all现在有人使用css3动画和/或变换吗?无论如何都不错(但我仍然更喜欢css3作为其他答案之一)
Martin Meeser 2014年

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

1
这只是简单而优雅。
2014年

在使用fadeInfadeOut影响其他同级元素时,因为它会切换css display属性,在我看来,这很奇怪。但这解决了这个问题。谢谢,它优雅地工作就像一种魅力。
fsevenm

15

您可以使用此插件(将其放入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 );

12

您可以通过允许迭代次数执行多次闪烁来进一步扩展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

更改为,var iterationDuration = Math.floor(duration / iterations);以便您可以除以奇数并将其设置为return this;可以在其后链接其他方法。
user1477388 2014年

但这真的不会改变任何颜色吗?
晚上

12

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

喜欢这个解决方案,只不过背景不会回到以前的样子
MrPHP

7

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

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

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


7

一个简单的答案呢?

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

闪烁两次...全部都是伙计!


它不会以另一种颜色闪烁(这是所要求的),而只是使混浊度变浅和变浅。
蒂姆·埃克尔

6

我不敢相信这还不是这个问题。您要做的一切:

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

这正是您想要做的事,非常简单,适用于show()hide()方法。


15
注意:要使其正常工作,您需要添加jquery ui的效果。它不是核心jQuery的一部分
travis-146

6

脉冲效应(离线)JQuery插件适合您要寻找的东西吗?

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


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



该演示已损坏,因为它所引用的js库不存在
PandaWood

@PandaWood我已经恢复了到GitHub存储库的链接并更新了演示
VonC 2012年

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

1
究竟。简单,完整地控制淡入和淡出。
pollaris

5

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

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

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

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

4

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

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

将CSS文件中的当前CSS参数设置为普通的CSS,并创建一个仅处理该参数即可更改的新类,即background-color,并将其设置为“!important”以覆盖默认行为。像这样...

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

然后,只需使用下面的函数并将DOM元素作为字符串传递,则为要发生闪烁的次数的整数,要更改为的类,以及延迟的整数。

注意:如果为“ 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.  

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

简单灵活


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

3000是3秒

从不透明度1开始逐渐降低到0.3,然后逐渐降低到1,依此类推。

您可以堆叠更多这些。

只需要jQuery。:)


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


2

如果包含一个库太过分了,那么这里的解决方案一定可以正常工作。

$('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内部重置默认背景色

    经过一些浏览器测试,效果很好。


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>

如果您只是制作flash一个jQuery对象,它就可以正常工作。var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
Michael Blackburn 2014年

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

注意:动画背景颜色需要使用颜色UI插件。参见:api.jquery.com/animate
Martlark,2014年

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

1

将以上所有内容组合在一起-轻松制作元素闪烁并返回到原始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);

希望这可以帮助!


当心邪恶eval
Birla

我知道,我只需要一个快速而肮脏的解决方案。Eval有时会有用!
邓肯

1

这是一个混合使用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;
}


1

这足够通用,您可以编写任何要设置动画的代码。您甚至可以将延迟从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();
}

1

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

带有演示的 JQuery.pulsate()*

示例初始化程序:

  • $(“。pulse4”)。pulsate({speed:2500})
  • $(“。CommandBox button:visible”)。pulsate({color:“#f00”,速度:200,范围:85,重复:15})
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.