JQUERY how to animate a message changing color and position with timing

JQUERY how to animate a message changing color and position with timing

Hello,

Don't be afraid if  the post is long, I just gives example which runs but doesn't
satisfy me.

My question is:

WHICH IS THE SOLUTION TO MOVE A TEXT ON THE SCREEN CHANGING POSITION AND COLOR
WITH TIMING?

In the end of the post I give the code I've managed to do but which seems very complicated.

Does some one know an easier solution, please.

Thanks, Best regards



My purpose is to do an animation.
1/The message must be at the top left with a background color have fadeIn fadeOut
2/moves top right with another color yellow
3/in the end it must be bottom right red.

First I've tryed this 


$("#msg").append("hello").fadeOut(1000).fadeIn(1000).css("background-color","yellow").css({
        position: "absolute",
        top:  "200px",
        left: "400px"
    }).show();

but css color wait not for fadeIn fadeOut so I've found a solution
with queue


$("#msg").append("hello I want to go!").css("background-color","red").fadeOut(1000).fadeIn(1000).queue( function() 
{ 
$(this).css("background-color","green");
$(this).dequeue();
})
.queue( function() 
{ 
$(this).css({
        position: "absolute",
        top:  "0px",
        left: "400px"
    }).show();
$(this).dequeue();
});


in the end after struggling reading in books and serching on the internet I found a solution, BUT

it is very difficult to code using it.

I wonder if some one know a better solution easy to code to do this



my code is (which runs but very uneasy to use)

//*********************************************************************************



<!DOCTYPE html>
<html>
  <head>

    <title>ANIMATION with timer: a solution very difficult to apply</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
 </head>
  <body>

<span id="msg">my message: </span>
 
    <script>
      $(function() {
var cpt=0;
var time_delta=2000;
  var int1=setInterval( function() 
{
cpt++;
if (cpt==1)
{
$("#msg").append(time_delta);
$("#msg").html("hello I am top left!").css("background-color","red").fadeOut(500).fadeIn(500).queue( function() 
{ 
$(this).html("hello I am top right!").css({
position: "absolute",
top:  "0px",
left: "400px"
}).css("background-color","green").fadeOut(500).fadeIn(500);
$(this).dequeue();
});
}
else if  (cpt==2)
{
$("#msg").html("hello I am bottom right!").css({
position: "absolute",
top:  "400px",
left: "400px"
}).css("background-color","yellow").fadeOut(500).fadeIn(500).queue( function() 
{ 
$(this).html("hello I am bottom left!").css({
position: "absolute",
top:  "400px",
left: "0px"
}).css("background-color","red").fadeOut(500).fadeIn(500);
$(this).dequeue();
});
}
else
{
$("#msg").append("finished");
clearInterval(int1);
}
},time_delta);
});
    
    </script>
  </body>
</html>
//*********************************************************************************


David  ( @webtecgeek   www.thecacaocafe.com )