[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2014-02-01
4
Medium Priority
?
711 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

650 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