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. 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 jQuery UI 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.

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

$('#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

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.

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.

You may want to look into jQuery UI. Specifically, the highlight 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);

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.

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