• j9国际站备用网址--信誉保证

    新闻中心

    互联网+期间,说建站,谈运营与网络营销

    以后地位:首页 > 新闻中心 > 前端开辟 > jQuery-动画进展循环实行

    jQuery-动画进展循环实行

    ###

    一个动画结果,实行完后,进展一段工夫,然后又开端实行,反复循环

    步调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) })
    首页
    案例中心
    关于j9国际站
    联系j9国际站