3

I need to add spontaneous blinking effect by default (without clicking on the divs) to the dynamically generated divs given in the below link.

Demo: http://jsfiddle.net/ramapriya/xeYnv/1/

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

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());
});
#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/1.11.1/jquery.min.js"></script>
<div id="container"></div>

2
  • You need each div to blink individually ? :| Commented Sep 17, 2013 at 11:47
  • Yes i need to make each div to blink individually. Commented Sep 17, 2013 at 11:50

3 Answers 3

11

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>

0
0

I don't know if it affects any other functioning but it works

<div id='blink_me'>Text You want to blink goes here...!</div>


    <script type='text/javascript'>
     $(document).ready(function(){
     hideMe();
     });


    function showMe(){
       $('#blink_me').fadeIn(700);
       hideMe();
    }


    function hideMe(){
      $('#blink_me').fadeOut(700);
      showMe();
    }
   </script>
0
Text You want to blink goes here...!
<script type='text/javascript'>
 $(document).ready(function(){
 blinkMe();
 });


function blinkMe(){
   $('#blink_me').fadeOut(700).fadeIn(700);
   setTimeout(blinkMe,100);// or blinkMe();
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.