jQuery - Comment animer du texte simultanément à une transition de changement de couleur

Question

Je dois créer une transition en douceur du mouvement et du changement de couleur. À l'heure actuelle, le texte est d'abord animé, et seulement après l'animation fin de la transition de changement de couleur se produit. Comment est-ce que je peux changer la couleur du texte pendant le mouvement?
Voici le code HTML:

<button type="button" class="btn btn-danger center-block" id="btn">start animation</button> 
<div id="meterText" class="col-centered"></div> <!-- animated text --> 

CSS:

#meterText{ 
    display:none; 
    width: 50px; 
    height: 10px; 
    margin-left: 40px; 
    position: absolute; 
    top: 211px; 
    font-size: 15px; 
    color: red; 
} 

jQuery:

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; 
     } 
    } 
}); 

jsFiddle

Answer 1

par défaut Animer jquery œuvre par .. Donc, si vous avez 2 Animer .. la seconde course après la première terminée je me suis demandé pourquoi vous avez utilisé le code en lignes séparées pendant que vous pouvez le simplifié à une seule ligne

$("#meterText").animate({'marginTop':"-=83px",color: "#FFD700"}).text("second transition"); 

Answer 2

exécute pas les animations simultanément:

Vérifiez la DEMO

$("#meterText").animate({'marginTop':"-=83px",color: "#FFD700"}); 

Answer 3

Salut je vous conseille de utiliser pour une utilisation de css transition automatique de cette css dans votre sélecteur CSS:

-moz-transition-duration: 0.6s; 
-o-transition-duration: 0.6s; 
-webkit-transition-duration: 0.6s; 
transition-duration: 0.6s; 

puis dans votre jquery utilisation Css au lieu de .animate et il fonctionne en douceur et vous pouvez définir la durée de la css départ l'extrait

var counter=0; 
 

 
$("#kickme").on('click',function(event){ 
 
\t counter++; 
 
\t console.log(event.target.id + " was clicked"); 
 
\t switch(counter){ 
 
\t \t case 1:{ 
 
\t \t \t $("#meterText").text("first transition"); 
 
\t \t \t $("#meterText").hide().fadeIn(); 
 
\t \t \t break; 
 
\t \t } 
 
\t \t case 2:{ 
 
\t \t \t 
 
\t \t \t $("#meterText").css({'marginTop':"-=83px","color": "#FFD700"}); 
 
\t \t \t $("#meterText").text("second transition"); 
 
\t \t \t break; 
 
\t \t } 
 
\t \t case 3:{ 
 
\t \t \t $("#meterText").text("third transition"); 
 
      $("#meterText").css({'marginTop':"-=68p","color": "#44c767"}); 
 
\t \t \t break; 
 
\t \t } 
 
\t } 
 
\t 
 
});

#meterText{ 
 
\t display:none; 
 
\t width: 50px; 
 
\t height: 10px; 
 
\t margin-left: 40px; 
 
\t position: absolute; 
 
\t top: 211px; 
 
\t font-size: 15px; 
 
\t color: red; 
 
    \t -moz-transition-duration: 0.6s; 
 
-o-transition-duration: 0.6s; 
 
-webkit-transition-duration: 0.6s; 
 
transition-duration: 0.6s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-danger center-block" id="kickme">kick me!</button> 
 

 
<div id="meterText" class="col-centered"></div> <!-- meter's text -->