How to change this javascript to make divs stop in their way?

Question

How can I change this jsfiddle code so that when the button is clicked, the expanding divs immediately stop on their tracks I have a button and bouncing divs in place, but they are set to stop in a specific place.

HTML

<div class="bouncyHouse"> <button type="button">Click Me!</button> <div class="bouncer" data-vx='2' data-vy='-3'> <span>space</span> </div> <div class="bouncer" data-vx='-2' data-vy='2'> <span>space</span> </div> <div class="bouncer" data-vx='5' data-vy='2'> <span>space</span> </div> </div> 

CSS

 .bouncyHouse { height: 200px; width: 150%; background-color: black; position: relative; } .bouncer { position: absolute; width: 200px; color: white; } .bouncer:nth-child(2) { top: 30px; left: 100px; } .bouncer:nth-child(3) { top: 50px; left: 200px; } 

Javascript

  function hitLR(el, bounding) { console.log($(el).data('vx'), $(el).data('vy')) if (el.offsetLeft <= 0 && $(el).data('vx') < 0) { console.log('LEFT'); $(el).data('vx', -1 * $(el).data('vx')) } if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { console.log('RIGHT'); $(el).data('vx', -1 * $(el).data('vx')); } if (el.offsetTop <= 0 && $(el).data('vy') < 0) { console.log('TOP'); $(el).data('vy', -1 * $(el).data('vy')); } if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { console.log('BOTTOM'); $(el).data('vy', -1 * $(el).data('vy')); } } function mover(el, bounding) { hitLR(el, bounding); el.style.left = el.offsetLeft + $(el).data('vx') + 'px'; el.style.top = el.offsetTop + $(el).data('vy') + 'px'; } function moveIt() { $('.bouncer').each(function() { mover(this, $('.bouncyHouse')[0]); }); }; $htmlBack = $('.bouncer').clone(); moveInterval = setInterval(moveIt, 50); $('button').on('click', function(){ console.log(moveInterval); if( moveInterval != 0){ clearInterval(moveInterval); $('.bouncer').remove(); $('.bouncyHouse').eq(0).append($htmlBack); $htmlBack = $('.bouncer').clone(); moveInterval = 0; } else { moveInterval = setInterval(moveIt, 50); } }); 

Answer 1

No problem.

Check out this script https://jsfiddle.net/ht3xtto3/ .

All you have to do is delete two lines. I commented on them in the violin.

Delete

 $('.bouncer').remove(); $('.bouncyHouse').eq(0).append($htmlBack); 

Doing this stops them when they are located, when you press a button and restart them when you press it again.

Hope this helps.

Best

Tim

Answer 2

Look at this script https://jsfiddle.net/itzmukeshy7/j38asdh3/ :)

 function hitLR(el, bounding) { if (el.offsetLeft <= 0 && $(el).data('vx') < 0) { //console.log('LEFT'); $(el).data('vx', -1 * $(el).data('vx')) } if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { //console.log('RIGHT'); $(el).data('vx', -1 * $(el).data('vx')); } if (el.offsetTop <= 0 && $(el).data('vy') < 0) { //console.log('TOP'); $(el).data('vy', -1 * $(el).data('vy')); } if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { //console.log('BOTTOM'); $(el).data('vy', -1 * $(el).data('vy')); } } function mover(el, bounding) { hitLR(el, bounding); el.style.left = el.offsetLeft + $(el).data('vx') + 'px'; el.style.top = el.offsetTop + $(el).data('vy') + 'px'; } function moveIt() { $('.bouncer').each(function() { mover(this, $('.bouncyHouse')[0]); }); } moveInterval = setInterval(moveIt, 50); $('button').on('click', function(){ console.log(moveInterval); if( moveInterval != 0){ clearInterval(moveInterval); moveInterval = 0; } else { moveInterval = setInterval(moveIt, 50); } }); 

 .bouncyHouse { height: 200px; width: 150%; background-color: black; position: relative; } .bouncer { position: absolute; width: 200px; color: white; } .bouncer:nth-child(2) { top: 30px; left: 100px; } .bouncer:nth-child(3) { top: 50px; left: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="bouncyHouse"> <button type="button">Click Me!</button> <div class="bouncer" data-vx='2' data-vy='-3'> <span>space</span> </div> <div class="bouncer" data-vx='-2' data-vy='2'> <span>space</span> </div> <div class="bouncer" data-vx='5' data-vy='2'> <span>space</span> </div> </div>