title: step in Jquery animate function
body: <p>Am using step in jQuery animate to animate CSS transform property.
  What ever the time limit that i kept for animate function its not taking into consideration.
  My code is like this</p>
  
  <pre><code>$('#instructions').animate({now:'+=50'},{
      step: function(now) {
        $(this).css('transform','rotate('+now+'deg)'), duration:'slow'
      }
  },50000);
  </code></pre>
  
  <p>Here am rotating my div about 50 deg with a time span of 50000ms,but its not taking those 50000ms.
  What i can do to create that time span.
  Thanks in advance.</p>
  
  <p>Here is my HTML.</p>
  
  <p>Am making the div rotation like a pendulum clock.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .subMenu {
                  width: 143px;
                  height: 80px;
                  border-bottom: 1px solid white;
                  line-height: 110px;
                  text-align: center;
                  font-size: 27px;
              }
              #line:before{
                  border-left: 1px solid white;
                  border-right: 1px solid white;
                  border-bottom: 49px solid white;
                  content: "";
                  position: absolute;
                  top: -50px;
                  left: 59px;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $('#instructions').animate({  now: '+=50' }, {
                      step: function(now,fx) {
                      $(this).css('transform','rotate('+now+'deg)');  
                      }
                  },50);
  
                  $('#instructions').animate({  now: '-=100' }, {
                      step: function(now,fx) {
                      $(this).css('transform','rotate('+now+'deg)');  
                      }
                  },50);
                  $('#instructions').animate({  now: '+=50' }, {
                      step: function(now,fx) {
                      $(this).css('transform','rotate('+now+'deg)');  
                      }
                  },50);
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="menu" style="width: 43px;
              height: 34px;
              position: absolute;
              margin: 5px;
              left: 188px;
              box-shadow: 4px 4px 13px white;
              border: 1px solid black;
              line-height: 28px;
              font-weight: bold;
              text-align: center;"&gt;Menu&lt;/div&gt;
          &lt;div style="transform: rotate(0deg) scale(1, 1); display: block;
              width: 1px;
              height: 1px;
              position: absolute;
              background: white;
              left: 216px;
              top: 48px;" id="instructions"&gt;&lt;div id="line" style="width: 101px;
                  height: 73px; position: absolute; top: 50px; left: -59px;
                  font-family: cursive; box-shadow: 3px 3px 23px 0px white;
                  padding: 12px; background: white;"&gt;
                  Click Here to Show/Hide the Menu&lt;/div&gt;&lt;/div&gt;
  
          &lt;div id="section1" style="height: 556px;
              width: 230px;
              background: rgb(106, 163, 226);
              float: left;
              border: solid black ;
              border-width: 1px 0px 1px 1px;
              /* display: none; */"&gt;&lt;div style="height: 200px;
                  width: 180px;
                  margin-left: 40px;
                  margin-top: 165px;
                  color: white;
                  cursor:pointer;"&gt;&lt;div class="subMenu" style="color:black;"
                      id="uploadMenu"&gt;UPLOAD&lt;/div&gt;
                  &lt;div class="subMenu" id="viewMenu"&gt;VIEW&lt;/div&gt;
                  &lt;div class="subMenu" id="reportMenu"&gt;REPORT&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="section2"&gt;
              &lt;div id="main_content" style="height: 556px;
                  width: 1080px;
                  background:rgb(6,206, 151);
                  border: solid black;
  
                  border-width:1px 1px 1px 0px ;
                  float: left;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kLesesLd/" rel="nofollow noreferrer">jsfiddle.net</a> </p>