Anthony... Is the robot supposed to do anything other than drive across the screen? I'm looking for buttons which might cause him to do things, but not seeing them. Is this part of what you're working on, and it's just not in place?
This is really well done by the way. I might show this to my daughter once it's done. -----Original Message----- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of anthony.calzadilla Sent: Friday, November 07, 2008 11:58 AM To: jQuery (English) Subject: [jQuery] Re: animated robot cartoon with jquery Hi, I changed the 'bounceHim' function a bit so that the different pieces of the robot look like they are separated and bouncing individually: function bounceHim(){ $("#sec-content,#branding").animate({top:"-=5px"}, 150).animate({top:"+=5px"},150); $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150); setTimeout("bounceHim()",300); } http://robot.anthonycalzadilla.com/ Once again thanks for your insight. I really am a complete novice at programming in general. I'm really scrutinizing your code so as to learn from it. -Anthony On Nov 7, 8:34 am, CodingCyborg <[EMAIL PROTECTED]> wrote: > 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"},1 > > > > 50); > > > > > > > > $("#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]
