利用jQuery實現點擊按鈕訂單完成特效



19 75 26



特效描述:利用jQuery實現 點擊按鈕 訂單完成 特效,利用jQuery實現點擊按鈕訂單完成特效

代碼結構

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

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



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 不用网的捕鱼游戏 山东十一选五走试图 昆明沐足中心 500比分直播完整亚冠 内蒙古快3今天预测号码推荐 球探足球即时比分 25选5法则 麻将来了胡牌规则 温州麻将 辽宁11选5彩乐乐 sm捆绑虐待黄色电影片 *股票涨停板公式 微乐棋牌 捕鱼达人3官网下载安装 竞猜足球比分推荐 黑龙江快乐十分开奖图