I just noticed, after looking over the code again, that since you have
all three pieces of the robot that are bouncing bounce at the same
time the line of code can be condensed into one. As well as the two
that bounce together at the beginning.
This:
$("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num
+"px"},150);
$("#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num
+"px"},150);
Becomes this:
$("#content,#branding").animate({top:"-="+num+"px"},
150).animate({top:"+="+num+"px"},150);
And in the next function this:
$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},
150);
$("#content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
$("#branding").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
Becomes this:
$("#sec-content,#content,#branding").animate({top:"-=5px"},
150).animate({top:"+=5px"},150);
Of course, if you wished to have each part bounce a different amount
or at different rates you would need to set up different "timeouts"
with different functions if they couldn't be set with the current 300
ms function. But if you wanted something to go at half speed or a
whole number multiple speed you could just changed how much code was
in the function and the numbers associated with it. (If any of that
makes sense.)
But that saves more code, and again, makes the file a bit (Quite
seriously only a few bits :P) smaller.
On Nov 7, 12:44 am, "anthony.calzadilla"
<[EMAIL PROTECTED]> wrote:
> Wow! Thank you CodingCyborg! Thank You! I'm going to study and learn
> from your code example and implement it into mine.
>
> -Anthony
>
> On Nov 7, 12:24 am, CodingCyborg <[EMAIL PROTECTED]> wrote:
>
> > I made a few more modifications such that the robot doesn't keep
> > bouncing and the sky keep moving when the ground has stopped. Though I
> > did the cheap way, in the sense that I just made it a short clip
> > rather than a full length repeat.
>
> >http://codingcyborg.com/jQueryFun/Robot/robot.html
>
> > That has the same basic directory set up, but with the modified
> > script.js file for viewing.
>
> > On Nov 6, 11:07 pm, CodingCyborg <[EMAIL PROTECTED]> wrote:
>
> > > This is Beautiful! To save yourself from the copy/paste to create the
> > > repeated bounce, and to make the file smaller, you can simply replace
> > > the three lines that were enormously long with this:
>
> > > startHim();
>
> > > And then add this at the bottom of the js file:
>
> > > var num = 1;
> > > function startHim(){
> > > num++;
> > >
> > > $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},
> > > 150);
> > >
> > > $("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num
> > > +"px"},150);
> > >
> > > $("#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num
> > > +"px"},150);
> > > if(num<4){
> > > setTimeout("startHim()",300);
> > > } else {
> > > setTimeout("bounceHim()",300);
> > > }
>
> > > }
>
> > > function bounceHim(){
> > >
> > > $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},
> > > 150);
> > >
> > > $("#content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
> > >
> > > $("#branding").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
> > > setTimeout("bounceHim()",300);
>
> > > }
>
> > > This allows for more control of the looped animation and easier to
> > > edit the "bounciness" of the robot. That's all I could enhance, if you
> > > could call it that. It's an amazing display of js and jQuery skills,
> > > and I admire you for that.
>
> > > On Nov 5, 10:56 pm, "anthony.calzadilla"
>
> > > <[EMAIL PROTECTED]> wrote:
> > > > Hi all,
> > > > I occasionally volunteer as a guest speaker for the web design class
> > > > at my child's elementary school. I wanted to introduce them to jquery
> > > > and html in a fun way so I created an animated jquery 'robot'. Now,
> > > > I'm not really adept at javascript or any type of programming at all.
> > > > I'm a designer turned wannabe' web developer :)
>
> > > > I used multiple divs and transparent png's to create the different
> > > > parts of the parallax background and the bouncing robot. The code I
> > > > was able to piece together to make it work is absolutely horrendous,
> > > > even for me. I was hoping maybe some of you jquery masters might be
> > > > able to take a looksy and help me out?
>
> > > > The url is: robot.anthonycalzadilla.com
> > > > (I would just post the code but its so long it wouldn't be visibly
> > > > viable)
>
> > > > Anthony
> > > > [EMAIL PROTECTED]
