Question

这是航点调用和图形栏功能的JS。每次到达航点时它都会重复，我希望它能够识别出已经达到的航点已经不再重复。谢谢你的帮助。 :)

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {

    $('#jack_bellamy').waypoint(function() {
        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)

    });
    });

Answer 1

如果您不希望航点继续触发，您可以destroy。要确保它只运行一次，您可以在处理程序的末尾销毁它。 this关键字指的是您可以在处理程序中调用destroy的航点实例。

$('#jack_bellamy').waypoint(function() {
  // all that animation stuff you mentioned
  this.destroy();
});

一旦达到路点，就不会重复该功能

1 个答案: