Question

我在我的网站上添加了waypoints.js脚本。现在我想用一些jquery连接这个脚本。如果内容在视口中，脚本应该“启动”。

在我使用的其他网站

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

但我不知道如何使用这些jquery连接waypoints脚本：

$({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);
        }
    });
}

使用航点JS连接jquery-script

1 个答案: