你如何在 jQuery 中使元素“闪光”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/275931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you make an element "flash" in jQuery
提问by Howard Pinsley
I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" an element — ie. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?
我是 jQuery 的新手，并且有一些使用 Prototype 的经验。在 Prototype 中，有一种“闪现”元素的方法——即。用另一种颜色简单地突出显示它并让它逐渐恢复正常，以便用户的眼睛被它吸引。jQuery 中有这样的方法吗？我看到了淡入、淡出和动画，但我没有看到像“闪光”这样的东西。也许这三个中的一个可以与适当的输入一起使用？
回答by etlds
My way is .fadein, .fadeout .fadein, .fadeout ......
我的方式是 .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>回答by curthipster
You can use the jQuery Color plugin.
您可以使用jQuery Color 插件。
For example, to draw attention to all the divs on your page, you could use the following code:
例如，要引起对页面上所有 div 的注意，您可以使用以下代码：
$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);
Edit - New and improved
编辑 - 新的和改进的
The following uses the same technique as above, but it has the added benefits of:
以下使用与上述相同的技术，但它具有以下额外好处：
- parameterized highlight color and duration
- retaining original background color, instead of assuming that it is white
- being an extension of jQuery, so you can use it on any object
- 参数化高亮颜色和持续时间
- 保留原始背景颜色，而不是假设它是白色
- 作为 jQuery 的扩展，所以你可以在任何对象上使用它
Extend the jQuery Object:
扩展 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);
}
};
Usage example:
用法示例：
$("div").animateHighlight("#dd0000", 1000);
回答by vinay
You can use css3 animations to flash an element
您可以使用 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; }
}
And you jQuery to add the class
而你 jQuery 添加类
jQuery(selector).addClass("flash");
回答by Majal
After 5 years... (And no additional plugin needed)
5年后......（不需要额外的插件）
This one "pulses" it to the color you want (e.g. white) by putting a div backgroundcolor behind it, and then fading the objectout and in again.
通过在其后面放置一个 div 背景颜色，然后将对象再次淡出和淡入，此方法将其“脉冲”到您想要的颜色（例如白色）。
HTMLobject (e.g. button):
HTML对象（例如按钮）：
<div style="background: #fff;">
<input type="submit" class="element" value="Whatever" />
</div>
jQuery(vanilla, no other plugins):
jQuery（原版，没有其他插件）：
$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
element- class name
元素- 类名
first numberin fadeTo()- milliseconds for the transition
fadeTo()过渡的第一个数字（以毫秒为单位）
second numberin fadeTo()- opacity of the object after fade/unfade
第二个数字in fadeTo()- 淡入淡出/不淡化后对象的不透明度
You may check this out in the lower right corner of this webpage: https://single.majlovesreg.one/v1/
您可以在本网页的右下角查看：https: //single.majlovesreg.one/v1/
Edit(willsteel) no duplicated selector by using $(this) and tweaked values to acutally perform a flash (as the OP requested).
通过使用 $(this) 和调整值来编辑（willsteel）没有重复的选择器以实际执行闪光（根据 OP 的要求）。
回答by Michiel Overeem
You could use the highlight effectin jQuery UI to achieve the same, I guess.
回答by SooDesuNe
If you're using jQueryUI, there is pulsatefunction in UI/Effects
如果您使用的是 jQueryUI，则有pulsate函数UI/Effects
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
回答by sporkit
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );
回答by okoman
You could use this plugin (put it in a js file and use it via script-tag)
你可以使用这个插件（把它放在一个 js 文件中并通过脚本标签使用它）
http://plugins.jquery.com/project/color
http://plugins.jquery.com/project/color
And then use something like this:
然后使用这样的东西：
jQuery.fn.flash = function( color, duration )
{
var current = this.css( 'color' );
this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
this.animate( { color: current }, duration / 2 );
}
This adds a 'flash' method to all jQuery objects:
这为所有 jQuery 对象添加了一个“flash”方法：
$( '#importantElement' ).flash( '255,0,0', 1000 );
回答by Rob Evans
You can extend Desheng Li's method further by allowing an iterations count to do multiple flashes like so:
您可以通过允许迭代计数执行多次闪烁来进一步扩展 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;
}
Then you can call the method with a time and number of flashes:
然后您可以使用时间和闪烁次数调用该方法：
$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
回答by hakunin
Pure jQuery solution.
纯 jQuery 解决方案。
(no jquery-ui/animate/color needed.)
（不需要 jquery-ui/animate/color。）
If all you want is that yellow "flash" effect without loading jquery 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)
};
Above script simply does 1s yellow fadeout, perfect for letting the user know the element was was updated or something similar.
上面的脚本只是做了 1 秒的黄色淡出，非常适合让用户知道元素已更新或类似的东西。
Usage:
用法：
flash($('#your-element'))
