Javascript jQuery“闪烁突出显示”对div的影响？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5205445/
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
jQuery "blinking highlight" effect on div?
提问by ZolaKt
I'm looking for a way to do the following.
我正在寻找一种方法来执行以下操作。
I add a <div>to a page, and an ajax callback returns some value. The <div>is filled with values from the ajax call, and the <div>is then prepended to another <div>, which acts as a table column.
我将 a 添加<div>到页面，并且 ajax 回调返回一些值。将<div>填充有从AJAX调用值，并且<div>然后将被预置到另一个<div>，其作为一个表列。
I would like to get the user's attention, to show her/him that there is something new on the page.
I want the <div>to blink, not show/hide, but to highlight/unhighlight for some time, lets say 5 seconds.
我想引起用户的注意，向她/他展示页面上有一些新东西。
我希望<div>闪烁，而不是显示/隐藏，而是突出显示/取消突出显示一段时间，比如说 5 秒。
I have been looking at the blink plugin, but as far as I can see it only does show/hide on an element.
我一直在研究闪烁插件，但据我所知，它只能在元素上显示/隐藏。
Btw, the solution has to be cross-browser, and yes, IE unfortunately included. I will probably have to hack a little to get it working in IE, but overall it has to work.
顺便说一句，解决方案必须是跨浏览器的，是的，不幸的是 IE 包括在内。我可能需要修改一下才能让它在 IE 中工作，但总的来说它必须工作。
回答by sled
jQuery UIHighlight Effectis what you're looking for.
jQuery UI高亮效果正是您所需要的。
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
The documentation and demo can be found here
文档和演示可以在这里找到
Edit:
Maybe the jQuery UIPulsate Effectis more appropriate, see here
编辑：
也许jQuery UI Pulsate Effect更合适，请看这里
Edit #2:
To adjust the opacity you could do this:
编辑 #2：
要调整不透明度，您可以执行以下操作：
$("div").click(function() {
// do fading 3 times
for(i=0;i<3;i++) {
$(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
}
});
...so it won't go any lower than 50% opacity.
...所以它的不透明度不会低于 50%。
回答by Alternegro
Take a look at http://jqueryui.com/demos/effect/. It has an effect named pulsate that will do exactly what you want.
看看http://jqueryui.com/demos/effect/。它具有名为 pulsate 的效果，可以完全满足您的要求。
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
回答by Ajey
This is a custom blink effect I created, which uses setIntervaland fadeTo
这是我创建的自定义闪烁效果，它使用setInterval和fadeTo
HTML -
HTML -
<div id="box">Box</div>
JS -
JS -
setInterval(function(){blink()}, 1000);
function blink() {
$("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
}
As simple as it gets.
就这么简单。
回答by lulalala
For those who do not want to include the whole of jQuery UI, you can use jQuery.pulse.jsinstead.
对于那些不想包含整个 jQuery UI 的人，您可以使用jQuery.pulse.js代替。
To have looping animation of changing opacity, do this:
要具有改变不透明度的循环动画，请执行以下操作：
$('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5});
It is light (less than 1kb), and allows you to loop any kind of animations.
它很轻（小于 1kb），并且允许您循环播放任何类型的动画。
回答by Clayton C
If you are not already using the Jquery UI library and you want to mimic the effect what you can do is very simple
如果您还没有使用 Jquery UI 库并且想要模仿效果，那么您可以做的很简单
$('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
you can also play around with the numbers to get a faster or slower one to fit your design better.
您还可以使用数字来获得更快或更慢的数字以更好地适应您的设计。
This can also be a global jquery function so you can use the same effect across the site. Also note that if you put this code in a for loop you can have 1 milion pulses so therefore you are not restricted to the default 6 or how much the default is.
这也可以是全局 jquery 函数，因此您可以在整个站点中使用相同的效果。另请注意，如果您将此代码放入 for 循环中，您可以拥有 100 万个脉冲，因此您不受默认值 6 或默认值的限制。
EDIT: Adding this as a global jQuery function
编辑：将其添加为全局 jQuery 函数
$.fn.Blink = function (interval = 100, iterate = 1) {
for (i = 1; i <= iterate; i++)
$(this).fadeOut(interval).fadeIn(interval);
}
Blink any element easily from your site using the following
使用以下方法从您的网站轻松闪烁任何元素
$('#myElement').Blink(); // Will Blink once
$('#myElement').Blink(500); // Will Blink once, but slowly
$('#myElement').Blink(100, 50); // Will Blink 50 times once
回答by Daniel Iser
Since I don't see any jQuery based solutions that don't require extra libraries here is a simple one that is a bit more flexible than those using fadeIn/fadeOut.
由于我没有看到任何不需要额外库的基于 jQuery 的解决方案，这是一个简单的解决方案，比使用淡入/淡出的解决方案更灵活。
$.fn.blink = function (count) {
var $this = $(this);
count = count - 1 || 0;
$this.animate({opacity: .25}, 100, function () {
$this.animate({opacity: 1}, 100, function () {
if (count > 0) {
$this.blink(count);
}
});
});
};
Use it like this
像这样使用它
$('#element').blink(3); // 3 Times.
回答by ghoppe
You may want to look into jQuery UI. Specifically, the highlight effect:
您可能想查看 jQuery UI。具体来说，高光效果：
回答by metamagikum
I use different predefined colors like so:
我使用不同的预定义颜色，如下所示：
theme = {
whateverFlashColor: '#ffffaa',
whateverElseFlashColor: '#bbffaa',
whateverElseThenFlashColor: '#ffffff',
};
and use them like this
并像这样使用它们
$('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000);
easy :)
简单 ：）
回答by ibsenv
just give elem.fadeOut(10).fadeIn(10);
只给 elem.fadeOut(10).fadeIn(10);
回答by Jibran
If you don't want the overhead of jQuery UI, I recently wrote a recursive solution using .animate(). You can customize the delays and colors as you need.
如果您不想要 jQuery UI 的开销，我最近使用.animate(). 您可以根据需要自定义延迟和颜色。
function doBlink(id, count) {
$(id).animate({ backgroundColor: "#fee3ea" }, {
duration: 100,
complete: function() {
// reset
$(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
duration: 100,
complete: function() {
// maybe call next round
if(count > 1) {
doBlink(id, --count);
}
}
});
}
});
}
Of course you'll need the color plugin to get backgroundColorto work with .animate().
https://github.com/jquery/jquery-color
当然，您需要颜色插件才能backgroundColor使用.animate().
https://github.com/jquery/jquery-color
And to provide a bit of context this is how I called it. I needed to scroll the page to my target div and then blink it.
为了提供一些上下文，我就是这样称呼它的。我需要将页面滚动到我的目标 div，然后使其闪烁。
$(window).load(function(){
$('html,body').animate({
scrollTop: $(scrollToId).offset().top - 50
}, {
duration: 400,
complete: function() { doBlink(scrollToId, 5); }
});
});
