CODEWITHSUNDEEP
javascriptjquerycssjquery-animatecoloranimation
Alex
Alex

Reputation: 2062

jQuery - How to animate text simultaneously to color change transition

I need to create a smooth transition of movement and color change. Right now, the text first is being animated, and only after animation end the color change transition occurs. How can I change the color of the text during the movement?
This is the HTML code:

<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

Upvotes: 0

Views: 1385

Answers (3)

Anis Boukhris
Anis Boukhris

Reputation: 421

Hi i advice you to use css for auto transition use this css in your css selector :

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

and then in your jquery use .css instead of .animate and it will work smoothly and you can set the duration from the css check out the snippet

var counter=0;

$("#kickme").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").css({'marginTop':"-=83px","color": "#FFD700"});
			$("#meterText").text("second transition");
			break;
		}
		case 3:{
			$("#meterText").text("third transition");
            $("#meterText").css({'marginTop':"-=68p","color": "#44c767"});
			break;
		}
	}
	
});
#meterText{
	display:none;
	width: 50px;
	height: 10px;
	margin-left: 40px;
	position: absolute;
	top: 211px;
	font-size: 15px;
	color: red;
    	-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 -->

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

by Default animate in jquery works one by one .. So if you have 2 animate .. the second one run after the first one finished I wondered why you used the code in separated lines while you can simplified it to just one line 

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

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Just execute the animations simultaneously:

Check the DEMO

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

Upvotes: 1

Related Questions