javascript - 具有渐变背景的动画计数

Question

我正在尝试对具有渐变背景的数字制作计数动画。但是，如果数字具有渐变背景，使用我当前的脚本，似乎无法完成这项工作。

我究竟做错了什么？

提前致谢。

var alreadyPlayed = false;

jQuery(window).on('scroll', function() {
  var y_scroll_pos = window.pageYOffset;
  var scroll_pos_test = 300;

  if (y_scroll_pos > scroll_pos_test && !alreadyPlayed) {
    alreadyPlayed = true;
    console.log('300');
    jQuery('.count').each(function() {
      var jQuerythis = jQuery(this);
      jQuery({
        Counter: 0
      }).animate({
        Counter: jQuerythis.text()
      }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
          jQuerythis.text(Math.ceil(this.Counter));
        }
      });
    });
  }
});

.counter-p {
  font-size: 60px;
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(to right, rgba(63, 77, 179, 1) 0%, rgba(63, 179, 120, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin: 40px 0;
  text-align: center;
  width: 100%;
  display: inline-block;
  position: relative;
  height: 50px;
  line-height: 50px;
  position: absolute;
  bottom: 50px;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter-div">
  <span class="counter-header">Example1</span>
  <span class="counter-p">
        <span class="count">34</span>%
  </span>
  <span class="counter-ending">Example</span>
</div>

标签： javascriptjqueryhtmlcssgradient