title: jQuery background-position animation
body: <p>I've created an image which is basically a CSS sprite of 3 images together. It's size is 278x123 so they are basically 3 images of 278x41.</p>
  
  <p>What I am trying to do is to make an animation of that by changing the background position.</p>
  
  <p>I've tried many things, one of my not very working solution is the following:</p>
  
  <pre><code>    var $slogan = $('#header h2 span');
  $slogan.css({backgroundPosition: '0px 0px'});
  function slogan_animation() {
      if ($slogan.css('background-position') == '0px 0px') {
          $slogan.fadeIn('slow').css('background-position', '0px -41px').fadeOut('slow');
      }
      else if ($slogan.css('background-position') == '0px -41px') {
          $slogan.fadeIn('slow').css('background-position', '0px -82px').fadeOut('slow');
      }
      else if ($slogan.css('background-position') == '0px -82px') {
          $slogan.fadeIn('slow').css('background-position', '0px 0px').fadeOut('slow');
      }
  }
  setInterval(slogan_animation, 2000);
  </code></pre>
  
  <p>Any ideas how could I do that?</p>
  
  <p>Basically I just need to:
  - set my background position to "0px 0px", then move it to "0px -41px", then "0px -82px" and then loop it again from "0px 0px". It would be also great to have fadeIn() effect between those.</p>
  
  <p>Any ideas?</p>
  
  <p>Thank you.</p>