treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Slow down animation when last element reached (jQuery)

  • Hello all,

    Curious if anyone can suggest a method for slowing down a jQuery animation when the last element is reached. Thank You.

    Sample Code:

    $(window).load(function(){
       
      var lastAnimation = 0;
      var animationTime = 700; // in ms
      var quietPeriod = 0; // in ms, time after animation to ignore mousescroll
      var easing = 'easeInOutQuart';
      
      function scrollThis(event, delta, deltaX, deltaY) {
          var timeNow = new Date().getTime();
          
          // change this to deltaX/deltaY depending on which
          // scrolling dir you want to capture
          deltaOfInterest = deltaY;
          
          if (deltaOfInterest == 0) {
              // Uncomment to use deltaX
              // event.preventDefault();
              return;
          }
          
          // Cancel scroll if currently animating or within quiet period
          if(timeNow - lastAnimation < quietPeriod + animationTime) {
              event.preventDefault();
              return;
          }
      
          if (deltaOfInterest < 0) {
              if ($('.current').next('.row').length) {
                  lastAnimation = timeNow;
                  $('.current').removeClass('current').next('.row').addClass('current');
                  $('html,body').stop().animate( {
                      scrollTop: $('.current').offset().top -=80 }, animationTime, easing);
              }
          } else {
              if ($('.current').prev('.row').length) {
                  lastAnimation = timeNow;
                  $('.current').removeClass('current').prev('.row').addClass('current');
                  $('html,body').stop().animate( {
                      scrollTop: $('.current').offset().top -=80 }, animationTime, easing);
              }
          }
          
          return false;
      }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                $(document).mousewheel(scrollThis);