title: jQuery - How to animate text simultaneously to color change transition
body: <p>I need to create a smooth transition of movement and color change. Right now, the text first is being animated, and only <b>after</b> animation end the color change transition occurs. How can I change the color of the text <b>during</b> the movement?
  <br>This is the HTML code:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-danger center-block" id="btn"&gt;start animation&lt;/button&gt;
  &lt;div id="meterText" class="col-centered"&gt;&lt;/div&gt; &lt;!-- animated text --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#meterText{
      display:none;
      width: 50px;
      height: 10px;
      margin-left: 40px;
      position: absolute;
      top: 211px;
      font-size: 15px;
      color: red;
  }
  </code></pre>
  
  <p><br>
  jQuery:</p>
  
  <pre><code>var counter=0;
  
  $("#btn").on('click',function(event){
      counter++;
      console.log(event.target.id + " was clicked");
      switch(counter){
          case 1:{
              $("#meterText").text("first transition");
              $("#meterText").hide().fadeIn();
              break;
          }
          case 2:{
  
              $("#meterText").animate({'marginTop':"-=83px"});
              $("#meterText").text("second transition");
              $("#meterText").animate({color: "#FFD700"});
              break;
          }
          case 3:{
              $("#meterText").text("third transition");   
              $("#meterText").animate({'marginTop':"-=68px"});
              $("#meterText").animate({color: "#44c767"});
              break;
          }
      }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/K9LpL/1045/" rel="nofollow">jsFiddle</a></p>