如何阻止其他 div 使用 javascript 制作动画？答案

【问题标题】：how to stop other divs from animating using javascript?如何阻止其他 div 使用 javascript 制作动画？
【发布时间】：2014-04-20 18:14:53
【问题描述】：

我在阻止其他 div 动画时遇到问题。我正在制作一个方形闪烁的 div，但每次我添加任何其他不需要动画的 div 时，它们也会动画。

这是我的代码：

javascript

var fadeintime = 500;
var fadeouttime = 1000;
$(document).ready(function(){
setInterval(anim, 50);
});
function anim(){
var rand = Math.floor((Math.random()*$("body").children("div").length));
var el = $("body").children("div")[rand];
$(el).animate({opacity: "0.7"}, fadeintime);
$(el).animate({opacity: "0.1"}, fadeouttime);
}

html

<div class="squares1"></div><div class="squares2"></div><div class="squares3"></div><div class="squares5"></div><div class="squares3"></div><div class="squares4"></div>... to as many squares i want

css

body {
background-color:#222;
    line-height:0;
    overflow:hidden;
    padding:0;
    margin:0;
}
.squares {
    background: none repeat scroll 0 0 #B6FFFF;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float:left;
    padding:0;
    margin:0;
}
.squares1 {
    background: none repeat scroll 0 0 #CEFF24;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float: left;
    padding:0;
    margin:0;
}
.squares2 {
    background: none repeat scroll 0 0 #BF86FF;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float:left;
    padding:0;
    margin:0;
}
.squares3 {
    background: none repeat scroll 0 0 #FF8B24;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float:left;
    padding:0;
    margin:0;
}
.squares4 {
    background: none repeat scroll 0 0  #EFFFB6;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float:left;
    padding:0;
    margin:0;
}
.squares5 {
    background: none repeat scroll 0 0  #FFBAF2;
    transition: background 1200ms ease-out 0s;
        opacity: 0;
    height: 3em;
width: 50px;
    float: left;
    padding:0;
    margin:0;
}

我认为 javascript 有问题，谁能指出如何阻止其他 div 动画？

【问题讨论】：

应该为哪些 div 设置动画？

标签： javascript css animation

【解决方案1】：

我认为问题出在这行代码

var el = $("body").children("div")[rand];

由于这将考虑所有 div 元素，因此您将无法对特定 div 进行任何控制。尝试为每个 div 提供 id。

<div class="squares1" id="div1">

【讨论】：

【解决方案2】：

我猜你想要类似的东西

Demo

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() * (30 * 30)))
    .fadeOut('fast')
    .fadeIn('fast');

    setTimeout(blink,100);
}

var columns = 10,
    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());
});

blink();

HTML

<div id="container"></div>

css

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

来源：How to add blinking effect for the dynamically generated div

【讨论】：