javascript를 사용하여 다른 div를 애니메이션으로 만드는 것을 멈추는 방법은 무엇입니까?

Question

다른 div의 애니메이션을 중지하는 데 문제가 있습니다. 나는 사각형을 깜박 거리는 사각형을 만들고 있지만 매번 애니메이션을 할 필요가없는 다른 div를 추가 할 때마다 애니메이트됩니다.

자바 스크립트

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

, 할 수있는 모든 사용자 점 방법 :

이

내 코드입니다 기타 어브에서 애니메이트하는 걸까요?

Answer 1

나는 문제는 각 사업부에 ID를 제공하는 특정 div.T 스피에 모든 컨트롤이없는 모든 DIV 요소를 고려할 것이 있기 때문에 코드

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

이 라인에있다 생각합니다.

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

Answer 2

나는 당신이 뭔가 같은

Demo

JS

function get_random_color() { 
    var letters = 'ABCDEF'.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