TalkPHP - Auto Animate Small Divs

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Auto Animate Small Divs (http://www.talkphp.com/javascript-ajax-e4x/4842-auto-animate-small-divs.html)

buildakicker

08-11-2009 10:50 PM

Auto Animate Small Divs

Hi all,

I have been trying to figure out how to automatically animate a random number of divs on a page. All of the divs should just slowly float up to the top of the page... they could just float out of the screen and appear at the bottom floating up again.. whatever, that is beyond me right now...

So basically what I am thinking is...

Code:

Using Jquery Animate Function..



on page load begin to slowly move divs up page... like bubbles. 



when they reach the top they fade out and just reappear to the bottom and come to the top again in a loop...

Any thoughts on how to go about this?

buildakicker

08-11-2009 11:02 PM

Here's some Psudeocode

Code:

On page load

set all the divs on the bottom of the page

randomly begin to animate(float up the screen)

as they reach top, fade out and then begin at bottom of page again....

LOOP

adamdecaf

08-12-2009 12:20 AM

Why not just loop in every div and move the CSS absolute position up a few pixels? It may[/will] look gagged but you could decrease the amount of divs.

Salathe

08-12-2009 10:16 AM

Have you looked into using one of the JS frameworks for their animation abstractions? jQuery for example would make something like this only a relatively few lines of code (well, depends on how you implement it).

buildakicker

08-12-2009 05:17 PM

Quote:

Originally Posted by Salathe (Post 27724)

That's what I was thinking, something with JQuery. What I am struggling with is getting the animation to move through the page onload. I should do something like this right:

Code:

$(document).ready(function(){

   

function loopDiv(){

    $("#animatedDiv").show();

    $("#animatedDiv").animate({top:"100"},4000);

    $("#animatedDiv").fadeTo("slow",0);

  });



//don't know much about this yet...

jquery.each() //say I have 20 items, loop through the items, create div, animate.



});

buildakicker

08-13-2009 08:20 PM

Using a Timeout, I've got this working perty good with JQuery inside the function...

Code:

function addElement()

{

       var tx = 'Here you go!';

        var i=0;

        for(i=0; i<1; i++){

                  newDiv = document.createElement("div");

                newDiv.className = "num" + i;

                newDiv.id="animatedDiv";

                 newDiv.innerHTML = "<div class='tweets'>"+ tx + "</div>";



                  // add the newly created element and it's content into the DOM

                  my_div = document.getElementById("page");

                  document.body.insertBefore(newDiv, my_div);

        

                $(document).ready(function(){        

                        $(".num0").fadeTo("slow",1);

                        $(".num0").animate({top:"-140"},2000);

                        $(".num0").fadeTo("slow",0);                        

                }); 

          }

        t=setTimeout("addElement()",1000);

}

All times are GMT. The time now is 05:07 PM.