title: JQuery - How can i smoothly resize an image to create a pulsating effect?
body: <p>Hey, Im working on a website with a friend of mine, and from the start, our client has been unhappy with the quality of one of our animations. This animation takes an image and makes it larger, it then makes it smaller, and repeats to get a pulsating effect. The opacity also changes throughout the animation.</p>
  
  <p>The current animation is on the home page of the site <a href="http://laveryrowe.com" rel="nofollow">http://laveryrowe.com</a>. The animation in question is the 75% image that you can see immediately upon arriving at the site.</p>
  
  <p>I have tested in safari, firefox and internet explorer. The animation only just about makes the cut in firefox, however safari and internet explorer do not produce smooth enough resizes for our client.</p>
  
  <p>Does anyone know of a better method of animating than the one i have used? (see code below and check out the site for an example).</p>
  
  <pre><code>function pulse() {
      $('#seventyfive').animate({
          marginTop: 175, 
          marginLeft: 25, 
          width: 261, height: 98, 
          opacity: 0.5
      }, 700, function() {
          $('#seventyfive').animate({
              marginTop: 161.95, 
              marginLeft: 15.2, 
              width: 287.1, height: 107.8, 
              opacity: 1
          }, 700, function() {
              pulse();
          });
      }); 
  };
  </code></pre>
  
  <p>Many thanks in advance, We could really use a hand,</p>
  
  <blockquote>
    <p><strong>Edit:</strong> <em>The issue isn't with the positioning, (or at least i don't think it is) instead, its more to do with the way the image is resized, you can notice the jittery edges as it gets bigger. It seems to look better as the opacity is increased, but i need the same quality for when it is opaque.</em></p>
  </blockquote>
  
  <p>Jai</p>