将 jquery-脚本与 waypoints JS 连接

Question

我已经在我的网站上添加了 waypoints.js 脚本。现在我想将此脚本与一些 jquery 连接起来。如果内容在视口中，脚本应该 "start"。

在我使用的另一个网站上

$('.fly-in-animation').waypoint(function() {
              $(this.element).addClass('animated fadeInUp');
          }, { offset: '100%' });

但我不知道如何将 waypoints 脚本与这些 jquery:

连接起来

$({countNum: $('#counter-laender').text()}).animate({countNum: 14}, {
  duration: 2000,
  easing:'linear',
  step: function() {
    $('#counter-laender').text(Math.floor(this.countNum));
  },
  complete: function() {
    $('#counter-laender').text(this.countNum);
  }
});

Answer 1

结合使用 Waypoints site 中的示例代码和您提供的内容（假设您希望在 #counter-laender 进入视口时发生这种情况）：

$(document).ready(function() {
  $('#counter-laender').waypoint(function() {
    myFunction();
  });
});

function myFunction() {
    $({
        countNum: $('#counter-laender').text()
    }).animate({
        countNum: 14
    }, {
        duration: 2000,
        easing: 'linear',
        step: function () {
            $('#counter-laender').text(Math.floor(this.countNum));
        },
        complete: function () {
            $('#counter-laender').text(this.countNum);
        }
    });
}

将 jquery-脚本与 waypoints JS 连接

Connect jquery-script with waypoints JS

html

javascript

jquery

jquery-waypoints