jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – animating the scroller

The next section of code deals with actually animating the scroller element based on where the mouse pointer is relative to the outer proximity container:

function goAnim(e) {

  var offset = prox.offset(),
    resetOffset = e.pageX - offset.left - middle,

    normalizedDuration = (resetOffset > 0) ? resetOffset :  -resetOffset,

    duration = (middle - normalizedDuration) * 50;

    scroller.stop().animate({
      left: (resetOffset < 0) ? 0 : "-" + (parseInt(scroller.width()) - parseInt(prox.width()))
    }, duration, "linear");
  }

What just happened?

Within the goAnim() function, we first get the offset of the proximity container so that we know its position relative to the document. We then work out where the mouse pointer is relative ...