jQuery “blinking highlight” effect on div?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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");});

Answer 5

You may want to look into jQuery UI. Specifically, the highlight effect:

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

Answer 6

<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