要在jQuery中實現老虎機動畫,你可以使用animate()
函數來創建動畫效果。以下是一個簡單的示例,展示了如何使用jQuery實現老虎機的旋轉動畫:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="slotMachine" style="width: 100px; height: 100px; border: 1px solid black;"></div>
$(document).ready(function() {
function spin() {
var slotMachine = $("#slotMachine");
var rotation = 0;
// 創建一個動畫隊列
slotMachine.animate({ rotation: rotation + 360 }, {
duration: 1000, // 動畫持續時間,單位為毫秒
step: function(now) {
// 在動畫過程中實時更新旋轉角度
slotMachine.css("transform", "rotate(" + now + "deg)");
},
complete: function() {
// 動畫完成后,可以選擇重新開始動畫或者執行其他操作
spin();
}
});
}
// 啟動旋轉動畫
spin();
});
這個示例中,我們創建了一個名為spin
的函數,該函數會使#slotMachine
元素旋轉360度。我們使用animate()
函數創建了一個動畫隊列,并在動畫過程中實時更新元素的transform
樣式。當動畫完成后,我們遞歸調用spin()
函數以實現持續旋轉的效果。
你可以根據需要調整動畫的持續時間、旋轉角度等參數。此外,你還可以添加其他動畫效果,如閃爍、移動等,以實現更復雜的老虎機動畫。