Fade in/out while resizing

Question

I have the following: http://jsfiddle.net/JfGVE/318/

The issue is that it's not a smooth animation. How I wanted it to work was:

1. Center the icon to the middle of the screen before displaying it.
2. Fade it in, and while it's fading in, resize it to something slightly larger, while staying in the dead center of the screen.
3. Fade it out.

How can I fix the animation to be completely smooth and feel as if it's a "pulse".

HTML:

<a href="#">Click Me!</a>

<i class="fa fa-heart"></i>

CSS:

.fa-heart {
    font-size: 48px;
    color: red;
    position: absolute;
    display: none;
}

jQuery:

$(document).on("click", "a", function() {
    var center_width = $(window).width() / 2;
    var center_height = $(window).height() / 2;

    /* Set the icon to the center of the screen. */
    $('.fa-heart').css({ 'left': center_width, 'top': center_height });

    /* Fade the icon in, resize it, and fade it out. */
    $('.fa-heart').fadeIn();
    $('.fa-heart').animate({ fontSize: '60px' }, 300);
    $('.fa-heart').fadeOut();
});

Answer 1

Check this out: http://jsfiddle.net/JfGVE/336/

$(document).on("click", "a", function() {
    var center_width = $(window).width() / 2;
    var center_height = $(window).height() / 2;

    /* Set the icon to the center of the screen. */
    $('.fa-heart').css({ 'left' : center_width - 24, 'top': center_height - 24 });

    /* Fade the icon in, resize it, and fade it out. */
    $('.fa-heart').animate({ fontSize: '60px', opacity: 1, 'left' : center_width - 30, 'top': center_height - 30}, 250);
    $('.fa-heart').animate({ fontSize: '48px', opacity: 0, 'left' : center_width - 24, 'top': center_height - 24}, 250);
});

What I did is instead of using the fadeIn() and fadeOut() I used the animate() to change the size and opacity at the same time. You can change the times so they resemble a real heart beat but because both the size change and opacity change are in the same animate() they will happen at the same time. The third value in the animate() is to set the center of the picture to the center of the page. This needs to be center_height (or center_width) - 1/2 of the picture height so the center of the image is aligned with the center of the screen. You need the offset because in normal CSS the position tag aligns your picture with the specified value relative to the top left corner (0, 0 of the picture). The times of the animate can be changed depending on how fast / slow you want the heart to "beat".