1
\$\begingroup\$

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

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ 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? \$\endgroup\$
    – no.
    Nov 27, 2013 at 17:23
  • \$\begingroup\$ @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. \$\endgroup\$ Nov 27, 2013 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.