ag九游客户端官网|(集团)点击登录

新闻中心

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

以后地位:首页 > 新闻中心 > 前端开辟 > 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) })
首页
案例中心
关于ag九游
联系ag九游