Jquery resize image with a heart beat effect

Question

Hello want to make a image with a heartbeat effect. It has to resize a bit, let's say maximum 20 pixel bigger, and then goes to original size. It will be like a heartbeat, 2 beats - original, 2 beats - original.

So far I found only this effect:

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

Or you can check it out here: JSFiddle

Answer 1

I would do it like this simply using .animate

DEMO http://jsfiddle.net/kevinPHPkevin/D3X7R/72/

function pulse() {
    $('#seventyfive').animate({
        width: 300, height: 300, // sets the base height and width
        opacity: 0.5
    }, 700, function() {
        $('#seventyfive').animate({
            width: 320, height: 320, // sets the alternative height and width
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

pulse();