title: jQuery scaling effects, scale in 1.1 and back to 1 when background position changes
body: <p>I tried the CSS route but all new to me and learning still but cannot seem to work it out. My JS below switches the background position to show a new image in the sprite every 1 second but wondering if anyone knew how I can kind of give it a small scale effects so when it changes grows a little then back to normal size before change to the next background position?</p>
  
  <p>JS:</p>
  
  <pre><code>    // Avatar animations
  var avatarInterval;
  function startAvatarAnimation() {
  
      var i = 0;
      var avatarSpeed = 500;
      var avatarCount= 11;
      var avatarHeight = 250;
      var avatarTotalHeight = 2750;
  
      avatarInterval = setInterval(function(){
          i++;
          if(i &gt; 11){
              i = 0;
          }
          $(".avatars").css({'background-position' : '0 -' + (i*avatarHeight) + 'px' });
          $(".avatars").toggleClass('scaleIn', 'scaleOut');
      }, avatarSpeed);
  
      return false;
  
  }
  
  function stopAvatarAnimation(){
      clearInterval(avatarInterval); 
      $(".avatars").css({'background-position' : '0 0' });
      return false;
  }
  </code></pre>