Jak zmienić ten javascript, aby div zatrzymał się na ich śladach?

Question

Jak zmienić ten kod: jsfiddle, tak aby po naciśnięciu przycisku odbijające się divy natychmiast zatrzymywały się w ich śladach? Mam przycisk i odbijające się divy w miejscu, ale są ustawione, aby zatrzymać się w określonym miejscu.

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

Nie ma problemu.

Sprawdź to skrzypce pod numerem https://jsfiddle.net/ht3xtto3/.

Wszystko, co musisz zrobić, to usunąć dwa wiersze. Skomentowałem ich w skrzypcach.

Usuń:

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

Doing który zatrzymuje je tam, gdzie są one po kliknięciu przycisku i wznawia je po kliknięciu go ponownie.

Mam nadzieję, że to pomoże.

Best,

Tim

Answer 2

wyglądają na tym skrzypce 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(){ 
 
\t console.log(moveInterval); 
 
\t if(moveInterval != 0){ 
 
\t \t clearInterval(moveInterval); 
 
    moveInterval = 0; 
 
    } else { 
 
\t \t 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>