[英]jQuery "blinking highlight" effect on div?
I'm looking for a way to do the following.我正在寻找一种方法来执行以下操作。
I add a <div>
to a page, and an ajax callback returns some value.我将<div>
添加到页面,ajax 回调返回一些值。 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. <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.顺便说一句,解决方案必须是跨浏览器的,是的,不幸的是包括 IE。 I will probably have to hack a little to get it working in IE, but overall it has to work.我可能需要修改一下才能让它在 IE 中运行,但总的来说它必须运行。
jQuery UI Highlight Effect is 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 UI Pulsate Effect is more appropriate, see here也许jQuery UI Pulsate Effect更合适,看这里
Edit #2 :编辑#2 :
To adjust the opacity you could do this:要调整不透明度,您可以这样做:
$("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% 的不透明度。
Take a look at http://jqueryui.com/demos/effect/ .看看http://jqueryui.com/demos/effect/ 。 It has an effect named pulsate that will do exactly what you want.它有一个名为 pulsate 的效果,可以完全按照您的意愿行事。
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
This is a custom blink effect I created, which uses setInterval
and 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.越简单越好。
http://jsfiddle.net/Ajey/25Wfn/ http://jsfiddle.net/Ajey/25Wfn/
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.这也可以是一个全局 jquery 函数,因此您可以在整个站点中使用相同的效果。 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.另请注意,如果您将此代码放在 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
For those who do not want to include the whole of jQuery UI, you can use jQuery.pulse.js instead.对于那些不想包含整个 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),并允许您循环播放任何类型的动画。
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 的解决方案,所以这里是一个简单的解决方案,它比那些使用 fadeIn/fadeOut 的解决方案更灵活。
$.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.
You may want to look into jQuery UI.您可能想查看 jQuery UI。 Specifically, the highlight effect:具体来说,高光效果:
http://jqueryui.com/demos/effect/ http://jqueryui.com/demos/effect/
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:)简单:)
just give elem.fadeOut(10).fadeIn(10);只需给 elem.fadeOut(10).fadeIn(10);
If you don't want the overhead of jQuery UI, I recently wrote a recursive solution using .animate()
.如果您不想要 jQuery UI 的开销,我最近使用.animate()
编写了一个递归解决方案。 You can customize the delays and colors as you need.您可以根据需要自定义延迟和颜色。
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 backgroundColor
to work with .animate()
.当然,您需要颜色插件才能使backgroundColor
与.animate()
一起使用。 https://github.com/jquery/jquery-color https://github.com/jquery/jquery-颜色
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); }
});
});
I think you could use a similar answer I gave.我认为您可以使用我给出的类似答案。 You can find it here... https://stackoverflow.com/a/19083993/2063096你可以在这里找到它...... https://stackoverflow.com/a/19083993/2063096
Note: This solution does NOT use jQuery UI, there is also a fiddle so you can play around to your liking before implementing it in your code.注意:这个解决方案不使用 jQuery UI,还有一个小提琴,所以你可以在你的代码中实现它之前随心所欲地玩。
Try with jquery.blink.js plugin:尝试使用 jquery.blink.js 插件:
https://github.com/webarthur/jquery-blink https://github.com/webarthur/jquery-blink
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/path/to/jquery.blink.js"></script>
<script>
jQuery('span').blink({color:'white'}, {color:'black'}, 50);
</script>
#enjoy! #请享用!
<script>
$(document).ready(function(){
var count = 0;
do {
$('#toFlash').fadeOut(500).fadeIn(500);
count++;
} while(count < 10);/*set how many time you want it to flash*/
});
</script
Check it out -检查一下-
<input type="button" id="btnclick" value="click" />
var intervalA;
var intervalB;
$(document).ready(function () {
$('#btnclick').click(function () {
blinkFont();
setTimeout(function () {
clearInterval(intervalA);
clearInterval(intervalB);
}, 5000);
});
});
function blinkFont() {
document.getElementById("blink").style.color = "red"
document.getElementById("blink").style.background = "black"
intervalA = setTimeout("blinkFont()", 500);
}
function setblinkFont() {
document.getElementById("blink").style.color = "black"
document.getElementById("blink").style.background = "red"
intervalB = setTimeout("blinkFont()", 500);
}
</script>
<div id="blink" class="live-chat">
<span>This is blinking text and background</span>
</div>
I couldn't find exactly what I was looking for so wrote something as basic as I could make it.我找不到我要找的东西,所以写了一些我能做到的最基本的东西。 The highlighted class could just be a background color.突出显示的类可能只是背景颜色。
var blinking = false; // global scope
function start_blinking() {
blinking = true;
blink();
}
function stop_blinking() {
blinking = false;
}
function blink(x=0) {
$("#element").removeClass("highlighted"); // default to not highlighted to account for the extra iteration after stopping
if (blinking) {
if (x%2 == 0) $("#element").addClass("highlighted"); // highlight on even numbers of x
setTimeout(function(){blink(++x)},500); // increment x and recurse
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.