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.

• no.: Ah that's a lot cleaner, I wasn't too sure if it needed the incremental variable or not, since there are multiple elements I wasn't sure if targeting them with animate would of caused problems. Is it necessary to give the timeout function a name like __remove() like you have?
• James Khoury: @Joe No. Its a standard I've developed because trying to debug anonymous functions is hard. If you name the function then debugging becomes easier as the stack shows meaningful names. Totally unneeded 99% of the time.