jquery动态插件之gsap和TextPlugin_gsap textplugin-优快云博客

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>数字化人才认证数动画</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/TextPlugin.min.js"></script> <style>
    .counter {
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <span class="counter" data-target="12345">0</span> 

  <script>
    $(document).ready(function() {
      gsap.registerPlugin(TextPlugin); // 注册 TextPlugin 插件

      $('.counter').each(function() {
        const target = parseInt($(this).data('target'));
        gsap.to($(this), {
          duration: 1, 
          ease: "power2.out", 
          text: target, 
          onUpdate: function() {
            $(this.target).text(Math.round($(this.target)._gsap.get(0)));
          }
        });
      });
    });
  </script>
</body>
</html>

多个数字使用一个方法会从上到下加载。

报错：
Uncaught TypeError:
Cannot read properties of undefined (reading ‘get’) at Tween.onUpdate [as _onUpdate] 。

onUpdate: function() {
  // 这里的	this.target 是undefined
  $(this.target).text(Math.round(this.target._gsap.get(0)));
}

解决方法：

onUpdate: function() {
  $(this.target).text(Math.round($(this.target)._gsap.get(0)));
}