jQuery - How to animate text simultaneously to color change transition


Tags: javascript,jquery,css3,jquery-animate,coloranimation

Problem :

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



Solution :

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

    CSS Howto..

    How to create different shape in css?

    How to add objects in a DIV and appear above the DIV

    how to make the background the same as the div size in css

    how to make an oval in css?

    How to display a div over other containts of an html page?

    How to debug CSS/Javascript hover issues

    How do you prevent expanding outer element when adding padding? [duplicate]

    My slideshow only cycles through one picture

    How to style for first class css

    how to switch between left and right css rules using Jquery?

    How do I use a gradient as a font color in CSS?

    CSS - how to make the end of the word blurry?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How do I get user-inputted information from the website directly to my e-mail?

    How to get `:after` to work in extjs iconCls?

    how to middle vertical-align using bootstrap input-group

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    how i center div elements horizontally in css?

    How to ensure the header floats with horizontal page expansion?

    Show tooltip content when its hovers

    How do i make my divs scrollable ONLY when the content is full?

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How do I add another css to Bootstrap?

    How to change css of element using jquery

    How to negate conjunction of two attributes in CSS selector

    How to activate jQuery function with img instead of button?

    Bootstrap - How to move styles in HTML to the .css from the example

    How to remove CSS and JS from a certain content-type in Drupal 7

    How to share CSS StyleSheet amongst projects?

    How to achieve following style for horizontal rule with css