title: Jquery easing and animation
body: <p>I grabbed this compact news reader from <a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" rel="nofollow">here</a> Below is the code for animating the ease in and ease out of the previews as the links are clicked on.  I change the dimensions of the whole page from a height of 300 to 600.  I did some googling and the animate part of jquery animates a CSS property of the element.  So I worked from there.  Thought I had things working but I didn't so I thought I would start from scratch again.</p>
  
  <p>Could any one explain this as it reads?  For example, and I'm just guessing, "animate page element's top css to -300px...  the rest of the line I don't understand.   </p>
  
  <p>Thank you for any help, harassment, or pointers.</p>
  
  <pre><code>$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                              $(this).css({'top':'310px'});
  </code></pre>
  
  <p>sdfadssf</p>
  
  <pre><code>            $items.each(function(i){
                  var $item = $(this);
                  $item.data('idx',i+1);
  
                  $item.bind('click',function(){
                      var $this       = $(this);
                      $cn_list.find('.selected').removeClass('selected');
                      $this.addClass('selected');
                      var idx         = $(this).data('idx');
                      var $current    = $cn_preview.find('.cn_content:nth-child('+current+')');
                      var $next       = $cn_preview.find('.cn_content:nth-child('+idx+')');
  
                      if(idx &gt; current){
                          $current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
                              $(this).css({'top':'310px'});
                          });
                          $next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
                      }
                      else if(idx &lt; current){
                          $current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
                              $(this).css({'top':'310px'});
                          });
                          $next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
                      }
                      current = idx;
                  });
              });
  </code></pre>