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.
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.
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.
jQuery UI Highlight Effect is what you're looking for.
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
The documentation and demo can be found here
Edit
Maybe the Pulsate Effect is more appropriate, see here
Edit #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.
Take a look at http://jqueryui.com/demos/effect/. It has an effect named pulsate that will do exactly what you want.
$("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");});
This is a custom blink effect I created, which uses setInterval and fadeTo
HTML -
<div id="box">Box</div>
JS -
setInterval(function(){blink()}, 1000);
function blink() {
$("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
}
As simple as it gets.
For those who do not want to include the whole of jQuery UI, you can use jQuery.pulse.js instead.
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.
If you are not already using the Jquery UI library and you want to mimic the effect what you can do is very simple
$('#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.
EDIT: Adding this as a global jQuery function
$.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
You may want to look into jQuery UI. Specifically, the highlight effect:
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.
$.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.
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 :)
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.
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().
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.
$(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
- should work on all browsers as it only Javascript and jQuery.
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.
just give elem.fadeOut(10).fadeIn(10);
Try with jquery.blink.js plugin:
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
}
}
来源：https://stackoverflow.com/questions/5205445/jquery-blinking-highlight-effect-on-div