javascript - Trigger jQuery animated number counter on window scroll -


i'm trying jquery animated counter trigger user scrolls more 200 pixels down page:

original jquery code here

$('.count').each(function () {     var $this = $(this);     jquery({ counter: 0 }).animate({ counter: $this.text() }, {         duration: 1000,         easing: 'swing',         step: function () {             $this.text(math.ceil(this.counter));         }     }); }); 

i've tried wrap in following jquery doesn't trigger animation until end:

$(window).scroll(function() {     if ($(window).scrolltop() > 200) {         $('.count').each(function () {             var $this = $(this);             jquery({ counter: 0 }).animate({ counter: $this.text() }, {                 duration: 1000,                 easing: 'swing',                 step: function () {                     $this.text(math.ceil(this.counter));                 }             });         });     } }); 

html:

<span class="count">100</span> <br/> <span class="count">200</span> <br/> <span class="count">300</span> 

the fiddle other post here

what best way trigger jquery counter user scrolls view or 200 pixels down page? i've tried jquery wayfinder not had luck making work.

unbind scroll handler (with $(window).off("scroll")) before triggering animation prevent animation restarting if user continues scroll.

$(window).scroll(startcounter);  function startcounter() {      if ($(window).scrolltop() > 200) {          $(window).off("scroll", startcounter);          $('.count').each(function () {              var $this = $(this);              jquery({ counter: 0 }).animate({ counter: $this.text() }, {                  duration: 1000,                  easing: 'swing',                  step: function () {                      $this.text(math.ceil(this.counter));                  }              });          });      }  }
body {      font-family: sans-serif;      height: 300vh;  }  .count {      position: fixed;      top: 8px;      left: 8px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="count">100</div>


Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -