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

Asked

Viewed 1,240 times

1

I have a Guitar Hero-style animation and I’d like to repeat the green note animation by falling in a defined time interval, but I’m not getting it...

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

javascript jquery animation

  • Have you looked at setInterval? Documentation on the MDN

  • Already, but when trying to use I did not succeed

  • @user8957, glad I could help. If you want you can put here, or in a new question, the complete code because I think you can optimize and shorten a lot in your code.

1 answer

3


You need to create copies/clones of the notes in order to make them fall again. What’s happening now is that at the end of the animation $('.nota_verde_cair') is removed and can not use 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

Browser other questions tagged javascript jquery animation

You are not signed in. Login or sign up in order to post.