jQuery "blinking highlight" effect on div?

Question

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.

Larghetto

Please don't. If you must, simply highlight it with the highlight effect (docs.jquery.com/UI/Effects/Highlight), but don't make it blink. – Maunder

@tv I think a short two or three "blinks" (where a "blink" is hopefully something subtle, like an animated border glow or something like that) are OK and not irritating, but definitely old-fashioned blinking over a long period of time would be bad. – Boong

Hehe, I know blinking is irritating, but it actually has a purpose here. The user isn't expected to sit by the monitor the whole day, so he has to see if something has changed from distance – Larghetto

You guys are hilarious. Webpages are only used for what you guys think they are right? I don't want to highlight, I need a blink because I'm writing a process monitor page to be viewed on a large format TV and it needs to flash red and continue so people eyes are drawn to it. – Behalf

Possible duplicate of How do you make an element "flash" in jQuery – Griqua

Answer 1

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.

Sherikasherill

Pulsate is what I'm looking for. Thanks a lot. Just, is there anyway to stop it from fading completely. Just to fade lets say to 50% opacity? Maybe just to chain highlight effect a few times? – Larghetto

Answer 2

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

Magistracy

Answer 3

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/

Sexpartite

Works just fine! And no JQuery UI needed. – Alexander

great solution! works without any issues using Jquery. Thanks – Insectivore

It is the best solution here! – Viera

The best solution here ! – Wapiti

Answer 4

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

Crosscountry

Answer 5

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.

Fitment

Still requires jQuery UI "Effects" – Biamonte

@JeromeJaglale I use it without jQuery UI, since opacity changing can be done in jQuery alone. It should be the same for you, unless you are using jQuery UI specific animations. – Fitment

Good point. I was misled by the first demo (text pulsing red) which requires jQuery UI Effects. – Biamonte

Just a note. You only need to include jquery.color.js for the color stuff. – Michelinemichell

Answer 6

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.

Somerset

Answer 7

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

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

Rabbitry

Answer 8

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

Befitting

Answer 9

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

Pascal

FadeOut/FadeIn hides/show the element in the end which is not what I was looking for. I needed to increase/decrease color opacity without hiding the element – Larghetto

Nope, elem.show().hide() does that. FadeOut/FadeIn changes the opactity. You can fiddle with the duration of fadeOut/fadeIn to get the required effect. It hides the elem once though. – Pascal

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

Octavo

Answer 11

I think you could use a similar answer I gave. You can find it here... https://mcmap.net/q/107988/-how-do-you-make-an-element-quot-flash-quot-in-jquery

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

Sizing

Answer 12

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!

Raff

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

Tipcat

Answer 14

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>

Sianna

Answer 15

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

Sumy