如何为动态生成的 div 添加闪烁效果答案

【问题标题】：How to add blinking effect for the dynamically generated div如何为动态生成的 div 添加闪烁效果
【发布时间】：2013-09-21 20:06:52
【问题描述】：

我需要在下面链接中动态生成的 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;
  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>

【问题讨论】：

您需要每个 div 单独闪烁吗？ :|
是的，我需要让每个 div 单独闪烁。

标签： jquery css

【解决方案1】：

您可以通过eq() 随机选择您的.col div 并通过例如fadeIn 和fadeOut 函数添加闪烁效果来实现它。

添加此功能：

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

然后调用setInterval(blink,100);中的blink函数启动效果。

Here is an example in jsFiddle

这里是示例 sn-p:

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>

【讨论】：

这太棒了，+1。

【解决方案2】：

你想眨眼的文字在这里...！

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


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

【讨论】：

【解决方案3】：

我不知道它是否会影响任何其他功能，但它可以工作

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

【讨论】：