How to loop in a time interval of an animation in JQuery?

Question

How to loop in a time interval of an animation in JQuery?

I have a Guitar Hero style animation and I would like to repeat the green note animation falling in a set interval of time, but I'm not getting it...

Http://jsfiddle.net/3Qs7D/1 /

1

javascript jquery animação

Author: Lollorcaust, 2014-05-30

Source

1 answers

score 3 · Accepted Answer

You need to create copies/clones of the notes to be able to drop them again. What is happening now is that at the end of the animation $('.nota_verde_cair') is removed and can not be used again...

Here is a suggestion: http://jsfiddle.net/pvKt6/

function newgame() {
    $("#comecar").hide();
    $("div.teclas").css("margin-right", "393px");
    $("div.teclas").css("float", "right");
    $("div.bgplay").css("opacity", "1.0");
    hover();


    setInterval(verde, 7000); // para repetir a animaçao

    function verde() {
        inicio;
        acertos = 0;
        var notaVerde = $('.nota_verde_cair').clone(); // criar um clone
        $('div.bgplay').append(notaVerde);             // inserí-lo no documento

        function testarAcerto(e) {
            if (e.which == 51 && Math.round(valorAtual) > 0) {
                notaVerde.remove(); // usar o clone em vez do original
                acertos++;
                $(document).bind("keyup");
            }
        }

        notaVerde.fadeTo(500, 1);   // usar o clone em vez do original
        // etc, usando sempre o clone