css - how to stop other divs from animating using javascript? -

i having problem in stopping other divs animating. making square blinking divs everytime add other divs don't need animate , animate well.

this code :

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>... many squares 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; } 

i think there problem javascript, can point how stop other divs animating ?

i think problem lies in line of code

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

since consider div element not have control on particular div.t ry providing id each div.

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