Jquery "Blinking Highlight" Effect on Div

jQuery blinking highlight effect on div?

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.

Jquery show / hide DIV and make it blink when it show

You can change your show function removing the timer and using fadein/out:

    function show(x){
        $('#warning').show().fadeOut(100, function(){
            $(this).fadeIn(100, function(){
                show(this);
            });
        });
    };

The snippet:

function show(x){  $('#warning').show().fadeOut(100, function(){    $(this).fadeIn(100, function(){      show(this);    });  });};
function stop(x) {  $('#warning').stop();}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<a class="buttons" href="#" onclick="show(this)">join us</a><a class="buttons" href="#" onclick="stop(this)">Stop blinking</a><div id="warning" style="display:none;">SHOW THIS DIV ...</div>

How to add blinking effect for the dynamically generated div

You can achieve it by randomly selecting your .col div's by eq() and adding to them blink effect by, for example fadeIn and fadeOut functions.

Add this function:

function blink(){
    $('.col').eq(Math.round(Math.random() * (40 * 40)))
    .fadeOut('fast')
    .fadeIn('fast');
}

Then call blink function in setInterval(blink,100); to start the effect.

Here is an example in jsFiddle

And here is example snippet:

function get_random_color() {    var letters = '0123456789ABCDEF'.split('');    var color = '#';    for (var i = 0; i < 6; i++) {        color += letters[Math.round(Math.random() * 15)];    }    return color;}
function blink(){    $('.col').eq(Math.round(Math.random() * (40 * 40)))    .fadeOut('fast')    .fadeIn('fast');}
var columns = 40,    container = $("#container"),    width = (100 / columns);
$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");
for (var ii = 0; ii < columns; ii++) {    var $row = $("<div />", {        class: "row"    });    container.append($row);
    for (var i = 0; i < columns; i++) {        var $col = $("<div />", {            class: "col",            style: "background: " + get_random_color() + ";",            id : ii + "-" + i        });        $row.append($col);    }}
$("div.col").click(function () {    alert(this.id + " " + $(this).html());});
setInterval(blink,100);

#container {    position: absolute;    top:0;right:0;bottom:0;left:0;}.col {     display: inline-block;    outline: 1px solid purple;    overflow: hidden;     height: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><div id="container"></div>

Javascript hide and show a div in a loop for a text blink effect

Something like this?

setInterval(function(){
     $("#test p").toggle();
},3000);

blinks every 3 seconds.

Using jquery animate to highlight div on load

jQuery UI has a specific effect for this called highlight. The issues of using animate on properties like background-color are described here:

All
animated properties should be animated
to a single numeric value, except as
noted below; most properties that are
non-numeric cannot be animated using
basic jQuery functionality. (For
example, width, height, or left can be
animated but background-color cannot
be.) Property values are treated as a
number of pixels unless otherwise
specified. The units em and % can be
specified where applicable.

Edit if you really don't want to go with the jQuery UI option, you could simulate a similar effect by wrapping the background-color into its own element and hiding that out.

example: http://jsfiddle.net/niklasvh/x2jrU/

Blink effect with help of jquery

This might answer your "randomization" question: https://stackoverflow.com/a/3594189/353710

function getInterval() {
    var min = 1;
    var max = 6;
    // and the formula is:
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function blink() {
    var newTimeout = getInterval() * 1000;

    console.log('New timeout: ' + newTimeout);

    setTimeout(blink, newTimeout);
}

blink();

I created a fiddle to demonstrate the functionality.

highlight/blink an item after pushing it on to a list

The documentation explains how you can achieve it in different ways.

Simple example:

.highlight {
  transition: all linear 300ms;
}
.highlight.ng-enter {
  opacity: 0;
  color: firebrick;
}
.highlight.ng-enter.ng-enter-active {
  opacity: 1;
}

And:

<li ng-repeat="item in items" class="highlight">

Demo: http://plnkr.co/edit/vI0U8aopxoc4c4Bfx2Rh?p=preview

---

Related Topics