JavaScript: Add a delay to each node created -

JavaScript: Add a delay to each node created -

trying larn javascript , first 'real' project.

i trying add together delay each .slice element created 1 time menu button clicked. while loop clones , appends , loop changes opacity visible on each slice.

i'm trying figure out how add together different delay each piece node appear 1 after each other instead of @ once.

do utilize foreach after while loop? advice great.

jsfiddle: http://jsfiddle.net/5d2gc/

js:

(function () { 'use strict';

var m = document.getelementbyid('btn-nav'); var = document.getelementbyid('main-nav'); var b = a.getelementsbyclassname('background')[0]; var s = a.getelementsbyclassname('slice'); m.addeventlistener('click', function() { m.classlist.add('open'); var c = document.getelementsbyclassname('slice')[0]; var swidth = c.clientwidth; while(swidth < a.clientwidth*(a.clientheight / c.clientheight)) { var d = c.clonenode(true); c.parentnode.appendchild(d); swidth = swidth + d.clientwidth; } for(var = 0; < s.length; i++){ s[i].style.opacity = 1; } }, false);

}());

html

menu

<div class="slice"></div> </div>

see jsfiddle

instead of :

for(var = 0; < s.length; i++){ s[i].style.opacity = 1; }

use :

for (var i=0;i<s.length;i++) { (function(ind) { settimeout(function(){s[ind].style.opacity = 1;}, 1000 + (1000 * ind)); })(i); }

i have set timeout every iteration.

javascript