How to move a div with slight lag using jquery

Question

I am working on a Jquery animation in which I want to animate a balloon to move off screen. I have figured out the movement part. But, I couldn't quite figure out how to make it move realistically with slight lags as a real balloon.

The .animate() function moves the element in linear motion.

$( document ).ready(function() {
  $("#section").click(function() {
    $('.parachute').animate({bottom: "1500px"}, 5000);
  });
});

How should I go about doing that. Please find the animation in below link.

http://codepen.io/anon/pen/vyBvLJ

Answer 1

Instead of trying to animate the path of the animation, use an online tool or Photoshop to create an animated balloon image.

This one looks nice in your fiddle :)

$('.parachute').animate({bottom: "1500px"}, 5000);