国产精品久久久久9999高清

    <ins id="xfhxr"><dfn id="xfhxr"></dfn></ins>

    <b id="xfhxr"><progress id="xfhxr"></progress></b>

    新聞中心

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

    當前位置:首頁 > 新聞中心 > 前端開發 > 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) })
    首頁
    案例中心
    關于我們
    聯系我們
    国产精品久久久久9999高清,JAPAN高清日本乱XXXXX,欧美性XXXX极品高清HD,YY6080午夜国产高清理论