18910140161

JavaScript-循环图动画-堆栈溢出

顺晟科技

2022-10-19 13:15:46

69

我看到了这个代码:https://codepen.io/Alex_Rodrigues/pen/ogyzdr您可以在这里看到JavaCIPT代码:

setTimeout(function start (){
  
  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $bar.attr('data-percent'));      
    }, i*100);
  });

  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) +'%');
        }
    });
  });

}, 500)

我想要图形完成动画,停顿3-5秒然后重复动画。目前,它完成动画,但没有循环。任何帮助都是非常感谢的。谢谢!


顺晟科技:

可以创建以下函数:

  1. 重置栏和内容
  2. 重新启动动画。

可将此函数设置为在以下位置调用:

为了使它起作用,我们必须找出所有不需要重复的内容,比如。

组合起来,如下所示:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航