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>

但problemis，它只能播放動畫1次。我也嘗試過無限循環，但這也不起作用，與按下按鈕兩次沒有任何第二次發生一樣。

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的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>