JQuery - How can I smoothly resize an image to create a pulsating effect?

Question

Hey, I work on the site with my friend, and from the very beginning our client was dissatisfied with the quality of one of our animations. This animation takes an image and makes it larger, then reduces it and repeats to get a pulsating effect. Transparency also changes throughout the animation.

The current animation is on the main page of the site http://laveryrowe.com . The animation in question is a 75 percent image that you can see immediately after arriving at the site.

I tested in safari, firefox and Internet explorer. The animation is only what makes the cut in firefox, however, safari and Internet explorer do not give a sufficiently smooth size for our client.

Does anyone know of a better animation method than the one I used? (see the code below and check out the site for an example).

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(); }); }); }; 

Thanks a lot in advance, we could really use a hand,

Edit: The problem is not with positioning (or at least I don’t think so), it has more to do with image resizing, you may notice when they get bigger. It seems to look better as the opacity increases, but I need the same quality when it is opaque.

Jai

Answer 1

Your animation is not smooth because your marginLeft is rounded (the image moves one pixel to the left) and then your width is rounded (the pixels of the image move slightly to the right because they are re-selected to a wider width.) Although the image did not move straight, your eyes tell you that this happened because they perceive the middle of the image as slightly to the right. This, along with the same as vertically, makes the animation jump.

Here is an example of why I think the edges seem to flicker or shake. Below are two images: 3 by 1 pixel. They both change to 5 by 1 and move 4 pixels to the left. Blue is what you see where size and location change independently. Red color allows you to resize only when the location changes and should look smooth.

Answer 2

Have you studied the effects of jQuery UI?

http://jqueryui.com/demos/effect/#default

Another alternative is to tell them about pulsing 75% and some yellow flashing banners and tasteful use of frames.

Answer 3

What about font size animations? That is => http://jsfiddle.net/steweb/D3X7R/

Js / jquery

 (function pulse(back) { $('#seventyfive').animate( { 'font-size': (back) ? '100px' : '140px', opacity: (back) ? 1 : 0.5 }, 700, function(){pulse(!back)}); })(false); 

Markup:

 <div id="seventyfive">75%</div> 

Css:

 #seventyfive{ position:absolute; font-size:100px; font-weight:bold; } 

Answer 4

You can try using + = some amount, rather than animate a specific value each time. I have used it before and have never noticed any problems.

Answer 5

Here an example of the following →

The problem is that you are simultaneously animating both position and size, and they are not synchronized with each other. I understand that you are doing this, trying to focus it vertically and horizontally. Instead, I would use a (terrible) table to keep the image in the correct position and just skip the size and opacity using Javascript, for example:

 <table id="table75"> <tr> <td><img id="seventyfive" src="http://laveryrowe.com/assets/images/heading_index_75.png" /></td> </tr> </table> #table75 { width:XXXpx; height:YYYpx; } #table75 tr { vertical-align:middle; } #table75 tr td { text-align:center; } function pulse() { $('#seventyfive').animate({ width: 261, height: 98, opacity: 0.5 }, 700, function() { $('#seventyfive').animate({ width: 287.1, height: 107.8, opacity: 1 }, 700, function() { pulse(); }); }); }; 

You can position the size of this table, but you need to get it in the right place (if necessary, using absolute positioning).

See example →

Answer 6

I would use Flash for animating the "75%" PNG SUPER with the attenuation function. This will work very well.