如何为动态生成的div添加闪烁效果 [英] How to add blinking effect for the dynamically generated div

问题描述

我需要在下面链接中给出的动态生成的div中默认添加自动闪烁效果（不点击div）。

演示： 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;轮廓：1px实心紫色; overflow：hidden; height：100％;}  

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

解决方案

通过 eq（）随机选择 .col div's，然后添加到它们，例如 fadeIn 和 fadeOut 函数。

添加此函数：

  function blink（）{
 $（'。col'）。eq（Math.round（Math.random 40 * 40）））
 .fadeOut（'fast'）
 .fadeIn（'fast'）; 
} 
  

然后调用 blink setInterval（blink，100）;

$

$ b

这是jsFiddle中的示例

这里是示例代码片段：

  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 ）;} 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）; }}; setInterval（blink，100）;  

  #container {position：absolute; top：0; right：0; bottom：0; left：0;}。col {display：inline-block;轮廓：1px实心紫色; overflow：hidden; height：100％;}  

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

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>

解决方案

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>

这篇关于如何为动态生成的div添加闪烁效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！