Tinder-esque location pulse animation effect

Question

As shameful as it is to say I wanted to see what all the fuss about was with Tinder, but after downloading it I found I was more interested with its animation effects and started wondering how they did them!

I decided I wanted to see if I could replicate some of them using jQuery so they can be used on web apps and sites and such, but it's always nice to have these snippets lying around if I ever need them.

This seems lightweight enough, and I'm pretty sure I've covered everything, each circle element is targeted individually, the elements are removed after to stop a build up etc. But just out of curiosity, would anyone have approached it differently?

$(document).ready(function () {
    var x = 0;

    addCircle(x);

    setInterval(function () {
        if (x === 0) {
            x = 1;
        }

        addCircle(x);

        x++;
    }, 1200);
});

function addCircle(id) {
    $('body').append('<div id="' + id + '" class="circle"></div>');

    $('#' + id).animate({
        'width': '300px',
        'height': '300px',
        'margin-top': '-150px',
        'margin-left': '-150px',
        'opacity': '0'
    }, 4000, 'easeOutCirc');

    setInterval(function () {
        $('#' + id).remove();
    }, 4000);
}

Example

Answer 1

Disclaimer: I don't know what Tinder is yet.
Shorter version:

$(document).ready(function () {
    function addCircle() {
        var $circle = $('<div class="circle"></div>');
        $circle.animate({
            'width': '300px',
            'height': '300px',
            'margin-top': '-150px',
            'margin-left': '-150px',
            'opacity': '0'
        }, 4000, 'easeOutCirc');
        $('body').append($circle);

        setTimeout(function __remove() {
            $circle.remove();
        }, 4000);
    }
    addCircle();
    setInterval(addCircle, 1200);
});

I put the addCircle method inside the closure, keeping the <div> in a variable means there is no need for an ID or counter x and used setTimeout because it only needs to run once.

http://jsfiddle.net/Y3r36/9/

I like it! Might have made the sizes variable but that could be overkill in this situation. Also it might be a good idea to put a wrapping <div> with position:relative in the case you want multiple of these.