Add transition to dynamic DOM element

Question

I am trying to add transition to div element. Transition is applied successfully to first added div element. When I add more divs by clicking on .container then these new divs do not have this animation. How can I add transitions to dynamic divs?

Below is my code

  var transition = 1; var x = 0; var left = 0; draw('white'); var $rect = $('.rect'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count]); count++; }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { x += transition; left = left + transition; $rect.css('left', left + 'px'); if (x > $container.outerWidth() - $rect.outerWidth()) { transition = -10; } if (x < 0) { transition = 1; } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div> 

Answer 1

You need to store left, x and transition for each rectangle. Having the same left, x and transition for all of them would mean they all will be at the same position on any point in time.

  draw('white'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count%arr.length]); count++; }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { $rect = $('.rect'); for(var i = 0; i < $rect.length; i++) { var thisrect = $rect[i]; thisrect.x += thisrect.transition; thisrect.left += thisrect.transition; $(thisrect).css('left', thisrect.left + 'px'); if (thisrect.x > $container.outerWidth() - $(thisrect).outerWidth()) { thisrect.transition = -10; } if (thisrect.x < 0) { thisrect.transition = 1; } } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect[0].x = 0; rect[0].left = 0; rect[0].transition = 1; rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div> 

Answer 2

You have to update the $rect variable for that. find the code below

  var transition = 1; var x = 0; var left = 0; draw('white'); var $rect = $('.rect'); var $container = $('.container'); var arr = ['red', 'green', 'black']; var count = 0; $('body').on('click', function () { draw(arr[count]); count++; $rect = $('.rect'); }); function init () { setInterval(onEachStep, 1000/60); } function onEachStep () { x += transition; left = left + transition; $rect.css('left', left + 'px'); if (x > $container.outerWidth() - $rect.outerWidth()) { transition = -10; } if (x < 0) { transition = 1; } } function draw (color) { var rect = $('<div />', { 'class': 'rect' }); rect.css('background', color); rect.appendTo('.container'); } init(); 

 .container { background: lightblue; height: 300px; } .rect { width: 50px; height: 20px; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container"></div>