JQuery "Blinking highlight" effect on a div?

Question

I am looking for a way to do the following.

I am adding a <div> to the page, and the ajax callback returns some value. <div> populated with the values ​​from the ajax call, and the <div> then added to another <div> , which acts as a table column.

I would like to attract the attention of the user, show him / him that there is something new on the page.
I want the <div> blink instead of showing / hiding, but highlighting / not highlighting for a while, say 5 seconds.

I am looking at the blink plugin, but as far as I can see, it only shows / hides the element.

Btw, the solution must be cross-browser, and unfortunately IE is enabled. I will probably have to hack a bit to get it to work in IE, but overall it should work.

Answer 1

jQuery UI Highlight Effect is what you are looking for.

 $("div").click(function () { $(this).effect("highlight", {}, 3000); }); 

Documentation and demo can be found here.

Edit

Perhaps the effect of Pulsate is more appropriate, see here

Edit # 2

To adjust the opacity, you can do this:

 $("div").click(function() { // do fading 3 times for(i=0;i<3;i++) { $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); } }); 

Thus, it will not have less than 50% opacity.

Answer 2

Take a look at http://jqueryui.com/demos/effect/ . It has an effect called pulsate, which will do exactly what you want.

 $("#trigger").change(function() {$("#div_you_want_to_blink").effect("pulsate");}); 

Answer 3

This is the custom blinking effect I created that 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); } 

How easy it is.

http://jsfiddle.net/Ajey/25Wfn/

Answer 4

For those who don't want to include the whole jQuery user interface, you can use jQuery.pulse.js .

To have a loop animation of transparency changes, do the following:

 $('#target').pulse({opacity: 0.8}, {duration : 100, pulses : 5}); 

It is light (less than 1 kilobyte) and allows you to create any kind of animation.

Answer 5

If you are not already using the jQuery user interface library and want to emulate the effect, what you can do is very simple

 $('#blinkElement').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100); 

You can also play with numbers to get a faster or slower version suitable for your design.

It can also be a global jquery function, so you can use the same effect on the site. Also note that if you put this code in a for loop, you can have 1 million pulses, so you are not limited to the default value of 6 or the default.

Answer 6

You can look into the jQuery user interface. In particular, the highlight effect:

http://jqueryui.com/demos/effect/

Answer 7

Since I do not see any jQuery-based solutions that do not require additional libraries, it is simple, which is slightly 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. 

Answer 8

If you don't want the overhead of the jQuery user interface, I recently wrote a recursive solution using .animate() . You can adjust the delays and colors as needed.

 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 a color plugin for backgroundColor work with .animate() . https://github.com/jquery/jquery-color

And to provide a little context, I called it that. I needed to scroll to my target div and then blink.

 $(window).load(function(){ $('html,body').animate({ scrollTop: $(scrollToId).offset().top - 50 }, { duration: 400, complete: function() { doBlink(scrollToId, 5); } }); }); 

Answer 9

I think you could use a similar answer that I gave. You can find it here ... https://stackoverflow.com/a/31247/

• should work on all browsers as it is only Javascript and jQuery.

Note. This solution does NOT use jQuery UI, there is also a fiddle so you can play to your liking before embedding it in your code.

Answer 10

I use different predefined colors:

 theme = { whateverFlashColor: '#ffffaa', whateverElseFlashColor: '#bbffaa', whateverElseThenFlashColor: '#ffffff', }; 

and use them like this:

 $('#element').effect("highlight", {color:theme.whateverFlashColor}, 1000); 

easy :)

Answer 11

just enter elem.fadeOut (10) .fadeIn (10);

Answer 12

Try it with the 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!

Answer 13

 <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 

Answer 14

Check -

 <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>