你如何在jQuery中使元素“闪光”？
我是jQuery的新手，并且有一些使用Prototype的经验。 在Prototype中，有一种方法可以“闪现”一个元素 – 即。 用另一种颜色简单地突出显示，并使其褪色恢复正常，以便吸引用户的注意力。 jQuery中有这样的方法吗？ 我看到fadeIn，fadeOut和animation，但我没有看到任何像“闪光灯”。 也许这三个中的一个可以用于适当的投入？
我的方法是.fadein，.fadeout .fadein，.fadeout ……
$("#someElement").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
你可以使用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);
你可以使用css3animation来刷新一个元素
.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");
5年后…（并没有额外的插件需要）
这个“脉冲”到你想要的颜色（例如白色）， 把背景颜色放在它后面，然后淡出对象 。
HTML对象（例如button）：
<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() 第二个数字 – 淡入/淡出后对象的不透明度
您可以在此网页的右下angular查看： https ： //www.majalmirasol.com/v1/
通过使用$（this） 编辑 （willsteel）没有重复的select器，并调整值以执行一个闪存（如OP请求）。
我猜，你可以在jQuery UI中使用高亮效果来达到同样的效果 。
如果你使用的是jQueryUI，那么在UI/Effects有一个pulsate函数
$("div").click(function () { $(this).effect("pulsate", { times:3 }, 2000); });
你可以使用这个插件（把它放在一个js文件中并通过脚本标签来使用它）
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 );
$('#district').css({opacity: 0}); $('#district').animate({opacity: 1}, 700 );
你可以通过迭代计数来进一步扩展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
纯粹的jQuery解决scheme。
（没有jquery-ui /animation/颜色需要。）
如果你想要的是没有加载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) };
上面的脚本只是简单地做了黄色淡出，让用户知道元素被更新或者类似的东西。
用法：
flash($('#your-element'))
这可能是一个更新的答案，并且比较短，因为这个post之后有些东西已经被巩固了。 需要jquery-ui-effect-highlight 。
$("div").click(function () { $(this).effect("highlight", {}, 3000); });
我不能相信这个问题还没有解决。 所有你必须做的：
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
这正是你想要的，超级简单，适用于show()和hide()方法。
会的 脉冲效应 （离线）JQuery插件适合你在找什么？
您可以添加一个持续时间来限制脉冲效应。
JP在评论中提到，现在有更新的脉冲插件 。
看到他的GitHub回购 。 这里是一个演示 。
如何一个非常简单的答案？
$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)
眨眼两次…这是所有的人！
以下代码适用于我。 定义两个淡入和淡出函数，并把它们放在彼此的callback中。
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);
后来发现了这么多月亮，但如果有人关心，这似乎是一个很好的方式来永久闪光：
$( "#someDiv" ).hide(); setInterval(function(){ $( "#someDiv" ).fadeIn(1000).fadeOut(1000); },0)
我正在寻找这个问题的解决scheme，但不依赖于jQuery UI。
这是我想出来的，它适用于我（无插件，只是Javascript和jQuery）; – inheritance人的工作小提琴 – http://jsfiddle.net/CriddleCraddle/yYcaY/2/
在你的CSS文件中设置当前的CSS参数为正常的CSS，并创build一个新的类，只是处理参数改变背景颜色，并将其设置为'！重要'来覆盖默认行为。 喜欢这个…
.button_flash { background-color: #8DABFF !important; }//This is the color to change to.
然后，只需使用下面的函数，并将DOM元素作为一个string传入，一个整数表示您希望闪存发生的次数，您想要更改的类以及一个用于延迟的整数。
注意：如果你为“时间”variables传递一个偶数，那么你最终会得到你开始使用的类，如果你传递了一个奇数，你将最终得到切换的类。 两者对于不同的事物都有用。 我用'我'来改变延迟时间，或者他们都会同时开火，效果就会丢失。
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.
像淡入淡出，你可以使用animationCSS /延迟
$(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);
简单而灵活
有一个解决方法的animation背景错误。 这个要点包括一个简单的高亮方法和它的使用的例子。
/* 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 */
如果在这里包括一个图书馆是一个矫枉过正的解决scheme，保证工作。
$('div').click(function() { $(this).css('background-color','#FFFFCC'); setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); });
- 设置事件触发器
- 设置块元素的背景颜色
- 在setTimeout里面使用fadeOut和fadeIn来创build一个小animation效果。
-
里面第二个setTimeout重置默认背景颜色
testing在几个浏览器，它很好地工作。
不幸的是，最好的答案需要JQuery UI。 http://api.jquery.com/animate/
这是一个香草JQuery解决scheme
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>
function pulse() { $('.blink').fadeIn(300).fadeOut(500); } setInterval(pulse, 1000);
这是colbeerhey解决scheme的一个稍微改进的版本。 我添加了一个return语句，以真正的jQueryforms，我们在调用animation之后链接事件。 我还添加了参数来清除队列并跳转到animation的结尾。
// 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); };
这个将脉动一个元素的背景颜色，直到一个mouseover事件被触发
$.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; }
把所有这些放在一起 – 一个简单的解决scheme闪烁一个元素，并返回到原来的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);
希望这可以帮助！
只要给elem.fadeOut（10）.fadeIn（10）;
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1);
3000是3秒
从不透明度1到0.3，然后是1，依此类推。
你可以叠加更多这些。
只有jQuery是必要的。 🙂
我正在使用这个。 虽然尚未在所有浏览器上进行testing。 只要以你喜欢的方式修改这个，
用法： 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添加到您的标题。
此function使其闪烁。 它必须使用cssHooks，因为rgb默认返回背景色function。
希望能帮助到你！
$.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; }
最简单的就是这样做：
<script> setInterval(function(){ $(".flash-it").toggleClass("hide"); },700) </script>
