title: jQuery animate duration
body: <p>I am trying to animate a transition of a table coming from  margin: 0 auto; to margin: 0 0 0 0; with the following script, however no matter the parameter I put into duration, the animation happens instantly. How do I fix this?</p>
  
  <pre><code>function select(box) {
    $("table td").not("#" + box).hide("slow");
    $("#" + box).animate({ height: 60, width: 60 }, "slow");
    $("table").animate({ "margin": "0px 0px 0px 0px" }, 1900);      //&lt;--- problem here
  
    if(box != "help")
        $(".sideLinks").show("slow");
    else
        $(".sideLinks").not("#show_help_links").show("slow");
    }
  </code></pre>
  
  <p>edit: here's the html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv='X-UA-Compatible' content='IE=edge' /&gt;
  &lt;title&gt;SAPUI5 First Test&lt;/title&gt;
  
  &lt;link rel="Stylesheet" type="text/css" href="funStyle.css" /&gt;
  
  &lt;script id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_platinum"
        data-sap-ui-libs="sap.ui.commons, sap.ui.table"&gt;
  &lt;/script&gt;
  
      &lt;!--&lt;script src="pageAnimation.js"&gt;&lt;/script&gt;--&gt;
      &lt;script src="Menu2.js"&gt;&lt;/script&gt;
      &lt;!--&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;--&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="body"&gt;
      &lt;nav&gt;
          &lt;table class="links"&gt;
              &lt;tr&gt;
                  &lt;td id="HR_forms" class="homeLinks" onclick="select(this.id);"&gt;
                      &lt;a href="#"&gt;
                      &lt;!--&lt;img src="images/HR.gif" /&gt;&lt;br /&gt;HR forms--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td id="finance_forms" class="homeLinks" onclick="select(this.id);"&gt;
                      &lt;a href="#"&gt;
                      &lt;!--&lt;img src="images/money.jpg" /&gt;&lt;br /&gt;Finance forms--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="find_forms" class="homeLinks" onclick="select(this.id);"&gt;
                      &lt;a href="#"&gt;
                     &lt;!-- &lt;img src="images/form.jpg" /&gt;&lt;br /&gt;Other forms--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td id="all_forms" class="homeLinks" onclick="selectAll();"&gt;
                      &lt;a href="#"&gt;
                      &lt;!--&lt;img src="images/list.jpg" /&gt;&lt;br /&gt;All forms--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="help" class="homeLinks" onclick="select(this.id);"&gt;
                      &lt;a href="#"&gt;
                      &lt;!--&lt;img src="images/help.png" /&gt;&lt;br /&gt;Help--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td id="contact_us" class="homeLinks" onclick="select(this.id);"&gt;
                      &lt;a href="#"&gt;
                      &lt;!--&lt;img src="images/phone.jpg" /&gt;&lt;br /&gt;Contact Us--&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  &lt;/nav&gt;
  
  &lt;div id="show_all_links" class="sideLinks" style="display: none" onClick="reset();"&gt;Show All Links&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>--Style--</p>
  
  <pre><code>body {
      /*background-color: #AAAAAA;*/
      background: url("images/black-honeycomb.jpg");
  }
  
  canvas {
      background-color: #7AC3E9;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      margin: 0 0px 0 0px;
      z-index: -1;
  }
  
  footer {
      background: url("images/marvelBar.png") no-repeat;
      background-size: 100%;
      position: absolute;
      bottom: 0;
      margin: 0px -13px -0px -10px;
      width: 100%;
      height: 83px;
  }
  
  .topBar {
      background: url("images/iPhone_toolbar_black.png");
      background-repeat: repeat-x;
      height: 43px;
      margin: -10px -8px 0px -10px;
      text-align: center;
      font: bold 24px helvetica;
      line-height: 2; 
      color: White;
  }
  
  .logo {
      position: absolute;
      right: 0;
      height: 40px;
      margin-right: 25px;
  }
  
  .back {
      background: url("images/backButton.png") no-repeat;
      background-size: 80px 33px;
      position: absolute;
      left: 0;
      top: 0;
      margin: 5px 0 10px 5px;
      width: 80px;
      height: 43px;
      font: bold 12px helvetica;
      color: White;
      text-align: center;
  }
  
  .login {
      background-color: #7AC3E9;
      position: absolute;
      left: 50%;
      top: 40%;
      margin-left: -171px;
      border: 1px solid black;
      border-radius: 15px;
  }
  
  .welcome {
      background-color: #7AC3E9;
      color: #3E4B61;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50px;
      margin-left: -81px;
      border: 1px solid black;
      border-radius: 15px;
      padding: 10px;
  }
  
  table {
      border-spacing: 5px;
  }
  
  ul {
      display: block;
      margin: -204px 0 0 0;
  }
  
  .HR_forms_links {
      display: none;
      list-style-type: none;
      background-color: White;
      border: 1px solid #C0C0C0;
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 0;
      text-align: left;
      padding: 10px 56px 10px 0;
      margin: 0px -8px 0 50px;
      background-image: url("images/listArrow.png") center;
  }
  
  .HR_forms_links a {
      display: block;
      margin: -10px 0px -10px 0px;
      text-decoration: none;
      font: bold 24px arial;
      color: Black;
      padding: 10px 46px 10px 10px;
      width: 100%;
      z-index: 10;
  }
  
  .finance_forms_links {
      display: none;
      list-style-type: none;
      background-color: White;
      border: 1px solid #C0C0C0;
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 0;
      text-align: left;
      padding: 10px 56px 10px 0;
      margin: 0px -8px 0 50px;
      background-image: url("images/listArrow.png") center;
  }
  
  .finance_forms_links a {
      display: block;
      margin: -10px 0px -10px 0px;
      text-decoration: none;
      font: bold 24px arial;
      color: Black;
      padding: 10px 46px 10px 10px;
      width: 100%;
      z-index: 10;
  }
  
  .help_links {
      display: none;
      list-style-type: none;
      background-color: White;
      border: 1px solid #C0C0C0;
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 0;
      text-align: left;
      padding: 10px 56px 10px 0;
      margin: 0px -8px 0 50px;
      background-image: url("images/listArrow.png") center;
  }
  
  .help_links a {
      display: block;
      margin: -10px 0px -10px 0px;
      text-decoration: none;
      font: bold 24px arial;
      color: Black;
      padding: 10px 46px 10px 10px;
      width: 100%;
      z-index: 10;
  }
  
  .contact_us_links {
      display: none;
      list-style-type: none;
      background-color: White;
      border: 1px solid #C0C0C0;
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 0;
      text-align: left;
      padding: 10px 56px 10px 0;
      margin: 0px -8px 0 50px;
  }
  
  .contact_us_links a {
      display: block;
      margin: -10px 0px -10px 0px;
      text-decoration: none;
      font: bold 24px arial;
      color: Black;
      padding: 10px 46px 10px 10px;
      width: 100%;
      z-index: 10;
  }
  
  #alt_help_menu {
      margin: 0;
  }
  
  #help_menu {
      margin-top: -140px;
  }
  
  #allForms {
      display: block;
      margin-top: -140px; 
  }
  
  .sideLinks {
      border-radius: 15px;
      text-align: center;
      height: 60px;
      width: 60px;
      background: #FFFF80;
      margin: 5px 0 0 7px;
  }
  
  .listArrow {
      padding: 0;
      height: 30px;
      margin: 0px -40px 0 0;
      float: right;
      border: none;
  }
  
  .subBar {
      background-image: url("images/iPhone_subtoolbar_black.png");
      height: 20px;
      text-align: left;
      color: White;
      font: bold 16px arial;
      text-shadow: 0 1px #999;
      margin: 0px -8px 0 50px;
      padding-right: 46px;
      list-style-type: none;
  }
  
  .subBar:hover {
      cursor: pointer;
  }
  
  .formsubBar {
      margin-top: -20px;
  }
  
  
  .logoText {
      margin: 0px 0 0 105px;
      position:relative;
      top: -54px;
  }
  
  h1 {
      color: Fuchsia;
  }
  
  h2 {
      font-size: small;
  }
  
  nav {
      margin: 0 auto;
      display: block;
  }
  
  nav li {
      list-style-type: none;
      padding: 0 10px 0 10px;
  }
  
  
  /*---------------Form Style----------------*/
  .simple_hire {
      width: 100%;
      text-align: left;
      border: 1px solid #000000;
      }
  
  .Simple_Hire_left {
      text-align: left;
      width: 50%;
      padding: 10px
      }
  
  .Simple_Hire_right {
      text-align: left;
      width: 50%;
      padding: 10px;
      }
  
  .Simple_Hire_mid {
      text-align: left;
      width: 100%;
      }
  
  .Simple_Hire_left_2 {
      text-align: left;
      width: 50%;
      padding: 10px;
      }
  
  .Simple_Hire_right_2 {
      text-align: left;
      width: 50%;
      padding: 10px;
      }
  
  .submit1 {
      top: 550px;
      left: 550px;
      }
  
  .reset {
      top: 550px;
      left: 440px;
      }
  
  .right {
      float: right;
  }
  
  .textarea {
      float: right;
      width: 99%;
      margin: 0 0 0 -10px;
  }
  
  .formTable {
      display: none;
      margin-top: 224px;
      max-width: 850px;
      margin-left: 90px;
      margin-right: -8px;
      background: #7AC3E9;
  }
  
  .formTable ul {
      margin-left: -90px;
      margin-right: 8px;
  }
  
  .form {
      margin: 0 -8px 0 50px;
  }
  
  #send_reset {
      margin: -17px 0px 0 -30px;
      position: relative;
      left: 50%;
      max-width: 150px;
  }
  
  /*----------tabled app---------------*/
  
  .links {
      margin: 0 auto 0 auto;
  }    
  
  .homeLinks {
      border: 1px solid #999999;
      border-radius: 15px;
      text-align: center;
      height: 150px;
      width: 150px;
      background: #FFFF80;
  }
  /*
  .homeLinks {
      margin: 10px 0 0 0;
  }
  */
  .homeLinks img {
      height: 90%;
      width: 90%;
  }
  
  
  #HR_forms {
      background: url("images/HRtext.png") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #FFFF80;
  } 
  
  #finance_forms {    
      background: url("images/financeText.png") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #E01B6A;
  }
  
  #find_forms { 
      background: url("images/findform.png") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #1CE3ED;
  }
  
  #all_forms {
      background: url("images/Form.jpg") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #3BFF62;
  }
  
  #help {
      background: url("images/helpText.png") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #ff3300;
  }
  
  #contact_us {
      background: url("images/phone.jpg") no-repeat 50% 50%; 
      background-size: 40%;
      background-color: #FFFF80;
  }
  
  #loadingSpinner {
      background: #999999;
      height: 150px;
      width: 150px;
      border-radius: 15px;
      display: none;
      margin-top: 50%;
      margin-left: 50%;
  }
  </code></pre>
  
  <p>update: so I got the animation to work with a table by wrapping it in a  and animating the div, but this doesn't work with my example above, any insight into this would greatly be appreciated</p>
  
  <p>EDIT: I found that I had 2 jquery libs, one of which didn't animate correctly, thanks for the help</p>