Solved

How to animate text with timer changing position and color using JQUERY

Posted on 2014-02-01
4
679 Views
Last Modified: 2014-02-01
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();

Open in new window


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

Open in new window

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>

Open in new window

//*********************************************************************************
0
Comment
Question by:DavidInLove
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39826806
How about this?
<!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" style="position:absolute">my message: </span>
 
    <script>
      $(function() {
		var cpt=0;
		var positions = [ 
			{top: '0',left:'0', message: 'hello I am top left!', color: 'red'},
			{top: '0',left:'400px', message: 'hello I am top right!', color: 'green'},
			{top: '400px',left:'400px', message: 'hello I am bottom right!', color: 'yellow'},
			{top: '400px',left:'0', message: 'hello I am bottom left!', color: 'red'}
		];
		var time_delta=2000;
	  	var int1=setInterval( function() {
			$("#msg").html(positions[cpt].message).css({
				'background-color': positions[cpt].color,
				'top': positions[cpt].top,
				'left': positions[cpt].left
			}).fadeOut(500).fadeIn(500);
			cpt++;
			if (cpt === positions.length) {clearInterval(int1);}
		},time_delta);
			
		});
 	   
    </script>
  </body>
</html>

Open in new window

0
 

Author Closing Comment

by:DavidInLove
ID: 39826873
Thank you a lot Tom for this beautifull solution!
David
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39826877
You're welcome. Thanks for the points.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question