jQuery: linear and swing animations

jQuery animations come in two forms: linear and swing animations. jQuery uses swing animations by default, but you can explicitly set your preferred animation type using the keywords swing and linear in the animate() method. For example, here's the basic syntax to use these keywords:

.animate(properties, speed, easing, complete);

In this schema, the placeholder easing can be replaced either by swing (default) or linear. An example:

$('#swing').click(function(e) {
  
  $('#test1').animate({
    width: '+=20px',
    height: '+=20px',
    left: 30
  }, 1000, 'swing', function() {
  
  
    $(this).animate({
      width: '-=20px',
      height: '-=20px',
      left: 0
    }, 1000, 'swing');
  
  
  });
  
  e.preventDefault();
  
  });
  
   $('#linear').click(function(e) {
  
  $('#test2').animate({
    width: '+=20px',
    height: '+=20px',
    left: 30
  }, 1000, 'linear', function() {
  
  
    $(this).animate({
      width: '-=20px',
      height: '-=20px',
      left: 0
    }, 1000, 'linear');
  
  
  
  });
  
  e.preventDefault();
  
  });

What are the differences between these two kinds of animations? Since we're talking about visual effects, the best thing you can do is to see for yourself. An example is better than any explanation.

Example

Live example

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “jQuery: linear and swing animations”

  1. I insist what is the difference both squares do the same thing i still not understand

Leave a Reply

Note: Only a member of this blog may post a comment.