Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    non-linear animation

    I'm a 77 year old newbie who finds javascript much more challenging than crosswords. A while back, I did a loop in a biplane for my website in Flash. Now, I'd like to do the same with jquery animation, but I can't get past simple horizontal and vertical travel. Here's a very simple bit of code, but it doesn't work. Why? (Please keep your response at the newbie level. I've done searches, of course, but all I can make out is that it's difficult to program non-linear movement.)
    while(n<5){
    $("#ball").css("left",(100*n)+"px");
    $("#ball").stop();
    setTimeout(function() {$("#ball").start();},2000);
    n++;
    }
    Thank you.
    A retired design engineer

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    .stop() is a method to stop jQuery animations that have been started with the .animate() method. And: There is no built-in .start() method.

    This is probably what you wanted to achieve (move element five times to the right, each time by 100 pixels, each time taking 2 seconds)
    Code:
    while(n<5) {
       $('#ball').animate({"left", "+=100"}, 2000);
       n++;
    }

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate your help and, yes, that's exactly what I wanted. Unfortunately, after doing a copy/paste, the ball just sat there. Yes, I've downloaded the jQuery library correctly, for I've been using the animation and other commands for quite a few days. I've probably made a stupid newbie mistake, so I've included the entire code:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <style>
    #ball
    {
    position:absolute;

    left:0px;
    top:300px;
    width:30px;
    height:30px;
    background-color:green;
    border-radius:15px;
    </style>
    <script>
    $(document).ready(function(){
    $(window).load(function(){
    n=0;
    while(n<5) {
    $('#ball').animate({"left", "+=100"}, 2000);
    n++;
    }
    });
    });
    </script>
    <body>
    <div id="ball"></div>
    </body>
    </html>

    Thanks again.

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found it! Sometimes even a newbie can stumble across something. I replaced a comma with a colon in that which you sent and it worked. Don't misunderstand. I'm not claiming anything more than being a lucky newbie. The learning curve is very steep and very long and I'm just starting.
    Thank you for your help.

    Now I can work on a biplane doing a loop!

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yeah sorry, my bad. I tested it on jsbin and found the comma/colon typo ... but then I forgot to correct the post


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •