Huge horizontal animation

http://jonahgoldstein.com/random/strange-horz-animation/

by Reusablecode

HTML

<div id="current">Currently at <span id="cur_val"></span>px;</div>    
<div id="nav"></div>    
<div id="content"></div>

CSS

body {
  margin:0; padding:0;
  background:#fff;
  overflow-x: hidden;
}
#content {
  width: 20000px;
  height:400px;
  position: relative;
  top:0;  left:0;
}
.marker {
  background: #eee;
  font-size: 30px;
  position: absolute;
  top:100px;
  left:0;
  text-indent: 20px;
  height: 300px;
  line-height: 300px;
  border-left: 1px dotted #000;
}
.marker.even {
  background: #eee;
}
#marker_0 {
  color:#fff;
  background:#ff5555;
}

#nav { height: 80px; position: relative; top: 100px; left:0; z-index:200; }
#nav a {float:left; margin: 2px; background: #000; width:14px; height:30px; position:relative; top:0; left:0; text-decoration:none; color:#aaa; }
#nav a .hint {display:none; position:absolute; top:40px; left:0; font-size:25px; background:#000; color:#fff; padding:5px;}
#nav a:hover .hint {display:block;}
a#link_0 {background:#ff5555;}

#description {
  margin: 20px;
  width: 700px;
  font-size: 16px;  line-height: 20px;
}

#current {
  background:#000;
  color:#fff;
  font-size: 20px;
  padding:20px;
  position: fixed;
  top:0;
  left:0;
  width:100%;
}

JavaScript

$(document).ready(function() {

  var $c = $('#content');              

  //  create markers
  var spacing = 500;
  var num_markers = Math.round($c.width() / spacing);
  for ( var i=0; i<num_markers; i++ ){
    //
    //    MAKE THE MARKERS
    //
    var x = i*spacing;
    var even = (i%2==0)?" even":"";
    var mrkr = $('<div class="marker'+even+'" id="marker_'+i+'">'+x+'px;</div>').appendTo($c).css({ 'left':x, 'width':spacing });
    //
    //    MAKE THE BUTTONS ABOVE
    //
    var lnk = $('<a href="#" id="link_'+i+'" data-to="'+i+'"><span class="hint">'+i*spacing+'px</span></a>').appendTo('#nav').click( 
          function(){ 
            //  when a link is clicked
            var goto = -$('#marker_'+$(this).attr('data-to')).position().left;
            //  find the x coordinate of the corresponding marker within #content
            var dur = Math.max(Math.min( Math.abs(goto-$c.position().left), 4000), 1000);
            // animate the slide
            $c.stop().animate({'left':goto},dur);
            return false;
          }
        );
  };
  
  
  setInterval( function(){ $('#cur_val').html( $('#content').position().left ) }, 30 );

});