我该如何使这个动画触发滚动？

问题描述：

我有这方面的工作JS提琴：http://jsfiddle.net/4v2wK/我该如何使这个动画触发滚动？

// Animate the element's value from x to y: 
$({someValue: 40000}).animate({someValue: 45000}, { 
    duration: 3000, 
    easing:'swing', // can be anything 
    step: function() { // called on every step 
     // Update the element's text with rounded-up value: 
     $('#el').text(commaSeparateNumber(Math.round(this.someValue))); 
    } 
}); 

function commaSeparateNumber(val){ 
    while (/(\d+)(\d{3})/.test(val.toString())){ 
     val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 
    } 
    return val; 
}

现在我想修改它，以便当用户通过DIV滚动，不一定盘旋在它它时才会触发，但在div中可见他或她的屏幕。说这个div在一个长页面的底部，当用户到达那里时，动画结束了，他们错过了整个节目。

你可以使用inview（https://github.com/protonet/jquery.inview）或写一些你自己的东西。检查vieport的大小，改变它的大小，并检查滚动位置，然后你知道该元素是否在视图 – caramba 2014-08-30 20:24:35

，所以你希望当用户到达目标（div）时开始倒计时？或者只要用户达到目标就想让计数开始和结束？ – ProllyGeek 2014-08-31 00:33:26

我希望当它们到达那里时开始，它的结局并不重要，但是开始的时候。谢谢！ – 2014-09-01 03:05:04

答

这段代码会在您的div顶部超过250px时触发动画。

isScrolledIntoView(); 
$(window).scroll(function() { 
    isScrolledIntoView(); 
}); 
function isScrolledIntoView(){ 
    $('.class').each(function(){ // add the class of the divs you want trigger on scroll over 
     var $this = $(this).attr("id"); 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(this).offset().top; 
     var elemBottom = elemTop + $(this).height(); 

     if ((elemTop >= docViewTop) && (((docViewBottom-250) >= elemTop))){ 
      // trigger your animation here 
      // with $this as a selector 
     } 
    })

我该如何使这个动画触发滚动？

相关推荐