I need example of text animation dynamically added to a Div?

Question

I want to make an text animation with JQuery but I dont know how should i start and how should i code this. Actually what/where to google it.

If you look at http://www.apple.com/stevejobs/ you see that text are moving and the last is added to the top with nice fadeout and so on. Could you help me to give an example/ scratch of doing it in JQuery Ajax and html.

I want to implement it in Python as backend and in the front use Ajax ,JQuery, Javascript and so on. please give hint that which one is better.

Thank you

score 3 · Answer 1 · answered Dec 09 '11 at 17:09

3

Put text in <div>s
Use jQuery's effects to show, hide, and animate the text.
Optionally add jQuery UI's easing effects and use something like the easeInOutCubic easing function.

answered Dec 09 '11 at 17:09

a paid nerd

30,702
30
134
179

Can you refer me a site that has example ? – Emax Dec 09 '11 at 19:30
little bit new in these stuff – Emax Dec 09 '11 at 19:30
Sorry, I don't have the time, but check out the second link in that answer. – a paid nerd Dec 09 '11 at 22:55

score 0 · Answer 2 · edited May 23 '17 at 12:11

This should get you started atleast with the effect.

<!DOCTYPE html>
<html>
<head>
  <style>
div { background:#de9a44; margin:3px; width:80px; 
height:40px;  }
#one { background:#de9a44; margin:3px; width:80px; 
height:40px; display:none;  }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="one"></div>
<div></div>
<div></div>
<script>
    //sets a timer to 1sec
$(document).ready(function () {
    window.setInterval(yourfunction, 1000);
});

    //goes to a php file and return data to be appended to your div.
function yourfunction() {   
    $.get("test.php", function(data){
        $("#one").html(data)
        $("#one").slideDown("slow");

    });

}
</script>

</body>
</html>

timer thanks to Kristof Claes and here more info on the jquery get() function. My recommendation for you is to map out a logic of what you want to accomplish, and search for how it might be called and start forming piece by piece your result..That's what I do, I'm no expert in jquery but i have an idea and thanks to great people in in S.O. and google I am able to accomplish awesome things.

Can you describe it with little text, how should i fill the one with data, which data model is better ? and how it works ? — Emax, Dec 09 '11 at 15:57

I need example of text animation dynamically added to a Div?

2 Answers2