title: jQuery animate doesn't work when i put easing
body: <p>So this is my HTML with the jQuery</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;SMIS StuCo&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/style_pages.css" type="text/css"/&gt;
          &lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                  var default_left = Math.round($("#selected").offset().left - $(".topnav").offset().left) + 20;
                  $("#box").css({left: default_left});
                  $("#selected a").css("color","black");
  
                  $("#topnav li a").hover(function(){
                      $(this).css("color","black");
                      left = Math.round($(this).offset().left - $(".topnav").offset().left) + 20;
                      $("#box").stop(true,false).animate({left: left},1000,"easeOutElastic");
                      $("#selected a").css("color","#e3e3e3");
                      },function(){
                          $(this).css("color","#e3e3e3");
                          $("#selected a").css("color","black");
                          default_left = Math.round($("#selected").offset().left - $(".topnav").offset().left) + 20;
                          $("#box").stop(true, false).animate({left: default_left},1000,"easeOutElastic");
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="page_container" class="page_container"&gt;
              &lt;nav class="topnav" id="topnav"&gt;
                  &lt;ul&gt;
                      &lt;li id="selected"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="members.html"&gt;Members&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Bulletin&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="calc.html"&gt;Calculator&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="box"&gt;&lt;/div&gt;
              &lt;/nav&gt;
              &lt;div id="output"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically, I'm trying to make a lavalamp. The #box is the thing that will move over the a:hover. It works fine when i dont have the easing. But when i use easing, the animation doesn't work. And i have the easing file is the correct one, because I tested in another very simple animation.</p>
  
  <p>I dont think the css will be needed, but just in case:</p>
  
  <pre><code>*{
      margin:0;
      padding:0;
  }
  body{
      background-color:#393939;
      font-family:"Myriad Pro";
  }
  div.page_container{
      margin:0px auto;
      width:940px;
      height:auto;
      background-color:#393939;
  }
  .topnav{
      display:block;
      position:relative;
      text-align:center;
      margin:0 50px;
      width:840px;
      height:40px;
      background-color:rgb(80,80,80);
  }
  .topnav ul{
      padding:0;
      margin:0;
      position:absolute;
      display:inline;
      left:0px;
      top:0px;
      z-index:100;
  }
  .topnav ul li{
      float:left;
      text-align:center;
      list-style-type:none;
      margin:0;
      padding:0;
      width:120px;
  }
  .topnav li a{
      display:block;
      padding:11px 0;
      color:#e3e3e3;
      text-decoration:none;
  }
  .topnav li a:hover{
  
  }
  .topnav #box{
      position:absolute;
      left:0;
      top:0;
      z-index:50;
      background:#ccc;
      height:20px;
      width:80px;
      margin-top:10px;
  }
  #output{
  margin-top:50px;
  color:white;
  }
  </code></pre>