Question

Is there any way to emulate a scroll type option using jquery animate? Right now it simply scrolls equivalent to the value you give it (like below). I cannot do a custom scroll bar on this div because its mainly geared towards making it easy to scroll on mobile devices. So the example below will scroll buy it goes -100px from the top, but then stops, and repeats. Is there any easy way to make this a transition that it will just continue.

jQuery(".down-arrow").mousedown(function(){
        var height = jQuery("#technology_list").height();
        //if($('#technology_list').offset().top 
        scrolling = true;
        startScrolling(jQuery("#technology_list"), "-=100px");
        //jQuery("#technology_list").animate({top: '-=25'});
    }).mouseup(function(){
        scrolling = false;
    });

    function startScrolling(obj, param)
{
    obj.animate({"top": param}, "fast", function(){
        if (scrolling)
        {
                startScrolling(obj, param);
        }
    });

Answer 1

jsFiddle showing it in action

Simplest answer would be that you want to make sure you set your animate to have easing set to linear.

.animate( { /* whats animating */ } , duration: 'XXX', easing: 'linear'
   ,function () { /* callback */ } 
);

Strangely enough, when easing is left out of animate() its default actually isn’t linear (which basically turns it off). The default is a standard easing, which eliminates that “smoothness”, one speed through out the entire animation that we’d want here.

Here’s an example so you can see it:

var end = 20;

for (i = 0; i < end; i++) {
  $('#test').animate({'top': '+=50px'}, 500, 'linear', function () {
      // callback
  });
}

​