Javascript анимировать dosnt петля

Question

У меня есть игры в рулетку, которая выглядит следующим образом:

Я хочу это, чтобы замедлить все больше и больше чем дальше, так что у меня есть этот код:

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var moveTime = Math.floor(Math.random() * 1000) + 2000 
 
    var slowDown = 1000; 
 
    while (moveTime > 0) { 
 
     $("div").animate({ 
 
     left: slowDown + "px" 
 
     }); 
 

 
     if (slowDown > 0) { 
 
     slowDown--; 
 
     moveTime = 0; 
 
     } 
 
     slowDown--; 
 
     moveTime--; 
 
    } 
 
    }); 
 
});

div { 
 
    position: absolute; 
 
    float: left; 
 
    margin: 0 0 0 -8400px; 
 
    width: 10000px; 
 
    height: 100px; 
 
    background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Start Animation</button> 
 
<div></div>

Но проблема в том, что он воспроизводит только анимацию 1 раз. Я также пробовал с infinityloop, но это тоже не работает, так же, как при нажатии кнопки дважды ничего не происходит во второй раз.

Answer 1

Проблема с вашим кодом заключается в том, что при последовательных щелчках элемент div уже находится в позиции left, к которой вы пытаетесь ее анимировать, поэтому ничего не происходит.

Чтобы исправить это, сбросьте позицию left назад до 0, прежде чем запускать анимацию. Попробуйте это:

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var moveTime = Math.floor(Math.random() * 1000) + 2000 
 
    var slowDown = 1000; 
 
    var $div = $('div').css('left', 0); // < reset the position here 
 

 
    while (moveTime > 0) { 
 
     $div.animate({ 
 
     left: slowDown + "px" 
 
     }); 
 

 
     if (slowDown > 0) { 
 
     slowDown--; 
 
     moveTime = 0; 
 
     } 
 
     
 
     slowDown--; 
 
     moveTime--; 
 
    } 
 
    }); 
 
});

div { 
 
    position: absolute; 
 
    float: left; 
 
    margin: 0 0 0 -8400px; 
 
    width: 10000px; 
 
    height: 100px; 
 
    background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Start Animation</button> 
 
<div></div>

Answer 2

Не слишком уверен, что если я хорошо понимал, и если Рори на самом деле дать вам ответ, который вы ожидали, но вот что я предлагаю.

Если вы хотите получить анимацию в рулетке, вы можете использовать jQuery's animate с настраиваемыми функциями облегчения, приведенными здесь: jQuery Easing Plugin.

Вы можете избавиться от while петли и использовать только animate функцию JQuery вместо вместе с Облегчения плагина.

Вот как это выглядит:

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    
 
    // Play with these two values 
 
    var nSpin = 4; 
 
    var slow = 2; 
 

 
    $("div") 
 
     .stop() 
 
     .css({ left: 0 }) 
 
     .animate({ 
 
     left: nSpin * 1000 
 
     }, slow * nSpin * 1000, 'easeOutExpo'); 
 
    
 
    }); 
 
});

div { 
 
    position: absolute; 
 
    float: left; 
 
    margin: 0 0 0 -8400px; 
 
    width: 10000px; 
 
    height: 100px; 
 
    background: repeating-linear-gradient(90deg, #DF0000, #DF0000 100px, #000000 100px, #000000 200px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
 

 
<button>Start Animation</button> 
 
<div></div>