<output id="bptdh"><ol id="bptdh"></ol></output>

<nobr id="bptdh"></nobr><nobr id="bptdh"><rp id="bptdh"><rp id="bptdh"></rp></rp></nobr>

    <big id="bptdh"></big>
      <noframes id="bptdh"><del id="bptdh"></del>

        <form id="bptdh"><dl id="bptdh"><rp id="bptdh"></rp></dl></form>

            <ruby id="bptdh"><del id="bptdh"></del></ruby>

            <form id="bptdh"><i id="bptdh"><ol id="bptdh"></ol></i></form>

                <nobr id="bptdh"><strike id="bptdh"></strike></nobr>

                <rp id="bptdh"><ins id="bptdh"></ins></rp>

                  新聞中心

                  互聯網+時代,說建站,談運營與網絡營銷

                  當前位置:首頁 > 新聞中心 > 前端開發 > jQuery-動畫停頓循環執行

                  jQuery-動畫停頓循環執行

                  時間:2022-06-02

                  一個動畫效果,執行完后,停頓一段時間,然后又開始執行,重復循環

                  步驟1: @keyframes先定義好動畫:


                  @-webkit-keyframes diamond {   50% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   } } @keyframes diamond {   50% {     -webkit-transform: translateY(-10px);     transform: translateY(-10px);   } } 

                  步驟2:定義一個類,使用定義的動畫


                  .animate {   -webkit-animation: diamond 3s;   animation: diamond 3s;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; } 

                  步驟3:使用js/jquery 控制動畫的執行


                  ①先給要使用動畫的元素添加- - -使用了動畫的類名
                  ②使用 “animationend” 監聽 動畫是否結束,該事件有個回調函數,在動畫執行完成后執行,回調函數里面添加如下邏輯:

                  1. 移除元素的 “動畫類名”
                  2. 設置 setTimeout 延遲執行方法,setTimeout 里面寫 添加元素的 “動畫類名”,以及多長時間后添加類名

                  $('.banner-btn-img').addClass('animate'); $('body').on('animationend webkitAnimationEnd oAnimationEnd', '.banner-btn-img', function () {   $('.banner-btn-img').removeClass('animate');     setTimeout(function () {       $('.banner-btn-img').addClass('animate');   }, 1000) })
                  首頁
                  案例中心
                  關于我們
                  聯系我們
                  18禁国产精品久久久久久