jQuery animate plane across screen - out left side - back in on right side?

In a continuos loop? So it indefinitely flys across the screen exiting out the left side and flying back in from the right side.Not finding much on google for this question? Can anyone show me how to accomplish this? Thanks!

Hi Eric,

Not difficult with jQuery.
Here’s some code for you to play around with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery animation example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      #plane{
        position:relative; 
        top:0px; 
        background-image: url(http://www.your-new-site.com/img/plane.png);
        background-repeat: no-repeat; 
        display:block;
        height:100px; 
        width:135px;
      }
    </style>
  </head>
  
  <body style="overflow:hidden">
    <span id="plane"></span>
  
    <script>
      $(document).ready(function() {
        
       function flyPlane(){
         plane.css('left', startPos);
         plane.animate({left: -200}, 7000, 'linear')
       };
       
        var screenWidth = $(document).width();
        var startPos = screenWidth;
        var plane = $('#plane')
        flyPlane();
        setInterval(function() {
          flyPlane();
        }, 9000);
      });
    </script>
  </body>
</html>

Be sure to swap out the site name of the image url in the CSS for that of your new site.

Does that help?
Is there anything you would like me to explain about the code?

As expected it works perfect Pullo! Didn’t test yet but I assume it works in ie8 too. Took me a little bit to figure out those three numbers for some reason. But I got it now. Thanks Pullo it looks awesome!

Dude, it works on IE7, too.
I couldn’t test, but I’m sure it even works on IE6.
You gotta love jQuery :slight_smile:

Cool even better. :slight_smile:

Good morning,

Is this how I would write multiple functions/doc readys? It works this way but i doubt it’s the best way to write it.

 $(function() {

       function nearClouds(){
         nearclouds.css('right', startPos);
         nearclouds.animate({right: -1268}, 60000, 'linear')
       };

        var screenWidth = $(document).width();
        var startPos = screenWidth;
        var nearclouds = $('#nearclouds')
        nearClouds();
        setInterval(function() {
          nearClouds();
        }, 63000);

	 function farClouds(){
         farclouds.css('right', startPos);
         farclouds.animate({right: -1068}, 90000, 'linear')
       };

        var screenWidth = $(document).width();
        var startPos = screenWidth;
        var farclouds = $('#farclouds')
        farClouds();
        setInterval(function() {
          farClouds();
        }, 93000);
      });

additionally, how would I also go about including an amimation that slowly takes a balloon up 50px - pauses - then back down 50px - pauses - in an infinite loop?

This is the closest I could come - which is not very close.
("#balloon").animate( {"top": "+=30px"}, 4000, "linear" ); ("#balloon").animate( {“top”: “-=30px”}, 4000, “linear” );

Thanks!

Hi Eric,

I would do this:

$(function() {
  function nearClouds(){
    nearclouds.css('right', startPos);
    nearclouds.animate({right: -1268}, 60000, 'linear');
  }
  
  function farClouds(){
    farclouds.css('right', startPos);
    farclouds.animate({right: -1068}, 90000, 'linear');
  }
  
  var startPos = $(document).width();
  var nearclouds = $('#nearclouds')
  var farclouds = $('#farclouds')
  
  nearClouds();
  farClouds();
  
  setInterval(function() {nearClouds();}, 63000);
  setInterval(function() {farClouds();}, 93000);
});

I would keep the function definitions within $(document).ready() as they are only called from here (i.e. they are not needed elsewhere on the page) and in this way they don’t pollute the global namespace.

If we are just talking about these two functions then this is all I would do, as the code is still relatively readable.
If you want to animate multiple elements, I would abstract everything out into an animateMe() function.

Bit like this:

$(function() {
  
  function animateMe(el, startStyle, endStyle, duration, repeat){
    setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat)}, repeat);
    el.css(startStyle);
    el.animate(endStyle, duration, 'linear', function(){
      el.css(startStyle);
    });
  }    
 
  w = $(document).width()
  animateMe($('#nearClouds'),{right: w}, {right: -1268}, 60000, 63000);
  animateMe($('#farClouds'),{right: w}, {right: -1068}, 90000, 93000);
});

This assumes that the elements disappear off the screen like in the last example, as the animation then starts over.
If you wanted to animate them between two points (i.e. forward and back), that would require an extra function.

Does this help at all?

Awesome tremendously helpful! And how is the best way to go about adding the balloons up 50px - pause - down 50px pause - in a infinite loop? Thanks for your help.

Hi Eric,

Here’s a revised version with two methods - one for a single way animation (i.e. plane enters left and exits right) and one for a two way animation as you describe in the above post.

Remember to swap the url for the planes with that of your new website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery animation example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      #plane, #plane1{
        background-image: url(http://www.your-website-here.com/img/plane.png); 
        position:relative; 
        background-repeat: no-repeat; 
        display:block;
        height:100px; 
        width:135px;
      }
    </style>
  </head>
  
  <body style="overflow:hidden">
    <span id="plane"></span>
    <span id="plane1"></span>
    <script>
      $(function() {
        function animateOneWay(el, startStyle, endStyle, duration, repeat){
          setTimeout(function(){animateOneWay(el, startStyle, endStyle, duration, repeat)}, repeat);
          el.css(startStyle);
          el.animate(endStyle, duration, 'linear');
        }
        
        function animateTwoWay(el, startStyle, endStyle, duration, pause){
          rep = pause*2 + duration*2
          setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
          el.css(startStyle);
          el.animate(endStyle, duration, 'linear').delay(pause);
          el.animate(startStyle, duration, 'linear').delay(pause);
        }
            
        w = $(document).width()
        animateOneWay($('#plane'),{left: w+200}, {left: -200}, 3000, 4000);
        animateTwoWay($('#plane1'),{top: 200}, {top: 150}, 1000, 1000);
      });
    </script>
  </body>
</html>

Hope that helps you.

Cool I hopefully will be able to put all that together. I like the animateMe function. I’d like to get all the animations into that. So what I’m trying to do is 1) plane flys left across screen. 2) different clouds float right across screen at different speeds. 3) the balloons float up and down. All very slowly so you don’t want to shoot yourself.

Yeah, should all be possible using the two functions.
Have a play around with it and let me know how you get on.

Nice! OK this is the cleanest I can get it. I edited it a little bit and moved some things around. Does this look good or can you see anyways to clean it up a bit and/or speed it up? Also, should I put it all in a documentReady or does $function suffice. I’ll have to test this on another computer too because on mine it spikes my cpu and kills it. Thanks a bunch! It looks amazing but, I’m torn. Just because you can doesnt mean you should right. I’ll slow it all down a lot and see if its not to much movement. ACTUALLY! In addition how would one go about providing a “stop animation” button? That way they can turn it all off at least. Thats a good compromise.

$(function() {

  function animateMe(el, startStyle, endStyle, duration, repeat){
    setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat)}, repeat);
    el.css(startStyle);
    el.animate(endStyle, duration, 'linear');
  }
  function animateTwoWay(el, startStyle, endStyle, duration, pause){
          rep = pause*2 + duration*2
          setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
          el.css(startStyle);
          el.animate(endStyle, duration, 'linear').delay(pause);
          el.animate(startStyle, duration, 'linear').delay(pause);
  }
  w = $(document).width()
  animateTwoWay($('#balloon1'),{bottom: 250}, {bottom: 150}, 15000, 4000);
  animateTwoWay($('#balloon2'),{bottom: 400}, {bottom: 250}, 20000, 7000);
  animateMe($('#nearclouds'),{right: w}, {right: -1268}, 60000, 63000);
  animateMe($('#farclouds'),{right: w}, {right: -1068}, 90000, 93000);
  animateMe($('#plane'),{left: w}, {left: -650}, 20000, 23000);
});

Nope. That’s looking pretty optimized.

$(function() {
  alert('Ready to do your bidding!');
});

is the same as this:

$(document).ready(function() {
  alert('Ready to do your bidding!');
});

The first is just a shortcut for the second.

You said it … :slight_smile:
I would try not to overdo it, but a bit of subtle animation can really spice up your page.

Add this to the page:

<a href="" id="stop">Stop this madness!</a>

new JS:

$(function() {
  var t1, t2;
  
  function animateOneWay(el, startStyle, endStyle, duration, repeat){
    t1 = setTimeout(function(){animateOneWay(el, startStyle, endStyle, duration, repeat)}, repeat);
    el.css(startStyle);
    el.animate(endStyle, duration, 'linear');
  }
  
  function animateTwoWay(el, startStyle, endStyle, duration, pause){
    rep = pause*2 + duration*2
    t2 = setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause)}, rep);
    el.css(startStyle);
    el.animate(endStyle, duration, 'linear').delay(pause);
    el.animate(startStyle, duration, 'linear').delay(pause);
  }
      
  w = $(document).width()
  animateOneWay($('#plane'),{left: w+200}, {left: -200}, 3000, 4000);
  animateTwoWay($('#plane1'),{top: 200}, {top: 150}, 1000, 1000);
  
  $('#stop').click(function(){
    $("body").find('*').stop(true, true);
    window.clearTimeout(t1);
    window.clearTimeout(t2);
    return false;
  })
});

The “stop” code is at the bottom. For it to work you need to assign variables to the timeouts.

Awesome - your the man! That should set me strait. Show the coolness and let them turn it off. Perfect. You just made a mini jquery.spritely minus the sprites. Spritely is a bit overkill for my needs. This does perfect. Thanks again:)

Ha-ha! Better yet I may just do a stylesheet switcher and turn it to a nice soft peaceful night scene.

Might want to check this out then: http://hibbard.eu/using-cookies-with-jquery-to-make-a-simple-style-switcher/
Maybe it helps.

Man I just went through the first 2 pages of google. Not one style switcher meets my needs. Not one of them allows you to only put the stuff in you want changed in the alt stylesheet. Each one makes you have to maintain 2 or three separate nearly identical stylesheets. I have a script that works perfect from my old site but I wanted to stick with a jquery plugin. Anyone know of one that has cookies and uses cascading stylesheets - verses one or the other. And a toggle would be a nice addition.

I figured out an easy way to toggle the animation. I only need to add !important to the position. That overrides jquery. That can easily be done with a stylesheet switcher. But too bad I don’t know how to do it without that. All the peices at least. Because its so easy doesn’t really need a simi large script to handle it. I just need to toggle a class (can do that), and add a cookie that remembers the class added (don’t know how to do that). Just thought I’d throw it out there see if anyone new how?

Like I said earlier, there are some very simple jquery script changers out there but they don’t do cascade and/or cookie.

God that too me forever to find this thread. lol. Thought it good to update with my final solution. Credit to pullo at bottom of tut for his invaluable help. http://www.websitecodetutorials.com/code/jquery-plugins/repeating-jquery-animation-with-cookie-on-off.php