Sigue reproduciendo animaciones en javascript

I'd like to achieve something como este (fading animated arrow at the bottom of the header picture indicating that the user needs to scroll down). In order to to this I'm planning to use the code below. The issue is that the animation only plays 1x whereas I would like it to play continuously (in a way that wouldn't take too much resource). See http://jsfiddle.net/ZN3aD/

$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);
$('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

preguntado el 28 de mayo de 14 a las 11:05

What about a css3 infinite animation? -

4 Respuestas

I would recommend you to use CSS animation:

.icon {
    ...
    -webkit-animation: icon 1.2s infinite;
    animation: icon 1.2s infinite;
}

@-webkit-keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}
@keyframes icon {
    from {
        opacity: 1;
        top: 80px;
    }
    to {
        opacity: 0;
        top: 100px;
    }
}

It will work in IE10+.

Demostración: http://jsfiddle.net/ZN3aD/6/

If you anyway want old browsers support then take a look at James Donnelly answer. Or you can use this code snippet:

(function animate() {
    $('.icon').animate({ opacity: 1, top: 80 }, 0)
    .animate({ opacity: 0, top: 100 }, 'slow', animate);
})();

Demostración: http://jsfiddle.net/ZN3aD/8/

contestado el 28 de mayo de 14 a las 12:05

Where this doesn't answer the question directly, it is a much lighter method of animation. - Kyle

@KyleSevenoaks You are right, I added JS solution also. - dfsq

it's funny that the question specifically says javascript . - TJ

@TJ And I'm providing javascript solution (along with recommendation for improvements), don't I? :) - dfsq

Set it up as a recursive function which calls itself when the animation completes. (Demostración de JSFiddle).

$('.icon').css('display', 'block');

function animate() {
    // jQuery's CSS method should be used instead of an instant animation
    $('.icon').css({ opacity: 1 });

    $('.icon').animate({
        opacity: 0,
        // jQuery handles the units for you, so you can just use a number here
        top: 100
    },'slow', function() {
        // I assume you want the top value to be reset here
        $(this).css({ top: 80 });

        // Call the animate() function again when the animation has completed
        animate();
    });
}

// Trigger the animation initially
animate();

contestado el 28 de mayo de 14 a las 11:05

He aquí una solución:

var arwtimer = 0;

$('.icon').css('display', 'block');
$('.icon').animate({ opacity: 1 }, 0);


function pleaseScroll() {
    $('.icon').css({ top: 80 }, 0).animate({ opacity: 1 }, 222);;

    $('.icon').delay(999).animate({ opacity: 0, top: "100px" }, 999);
}

arwtimer = setInterval(pleaseScroll, 4000);

http://jsfiddle.net/rvvb2/

contestado el 28 de mayo de 14 a las 12:05

This should do the trick. Adding setInterval will repeat the animation placed inside function:

     function runAnimation(){

     $('.icon').css('display', 'block');
     $('.icon').animate({ opacity: 1 }, 0);
     $('.icon').animate({ opacity: 0, top: "100px" }, 'slow');

                }

var interval = setInterval(runAnimation,1000);

contestado el 28 de mayo de 14 a las 11:05

setInterval is definitely not the best idea in this case. - tallmaris

@Tallmaris Could you explain? setInterval is exactly what to use if using js for this.. just needed some more tweaks to get the wanted effect.. see above answer - kit web

In my opinion it always raises lots of problem, most importantly if you have complex js running on the page. Maybe in a simple case like this is ok, but I always feel uncomfortable. Moreover, I noticed that it tends to behave strangely in various browsers: I remember having a problem in Chrome trying to open a popup which was blocked because the page had a setInterval on (some kind of spam detection in Chrome maybe). In general, if there are ways to avoid it (as in here) I'd rather not use it. - tallmaris

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.