新闻中心

互联网+时代,说建站,谈运营与网络营销

当前位置:首页 > 新闻中心 > 前端开发 > 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) })
首页
案例中心
关于我们
联系我们