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