<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery点击按钮订单完成特效 - 【更多源码:www.96flw.com】</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<button class="order"><span class="default">点击下单</span><span class="success">完成订单
<svg viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg></span>
<div class="box"></div>
<div class="truck">
<div class="back"></div>
<div class="front">
<div class="window"></div>
</div>
<div class="light top"></div>
<div class="light bottom"></div>
</div>
<div class="lines"></div>
</button>
<script type="text/javascript">
$('.order').click(function(e) {
let button = $(this);
if(!button.hasClass('animate')) {
button.addClass('animate');
setTimeout(() => {
button.removeClass('animate');
}, 10000);
}
});
</script>
</body>
</html>