Question

esta es la función que estoy utilizando, pero no se como hacer para que se mueva tan rapido la imagen y el ciclo se a infinito para al afectar el background-position se vea como un vídeo:

$(document).ready(function() {
$('.imagen').mouseenter(function(){
    var numero = -535;
    var suma;
    for (var i = 1; i <= 10; i++) {
        $(this).css({'backgroundPosition': suma+"px 0px"}, "-10");
        suma = numero * i;
    }
});
});

http://jsfiddle.net/kiokotzu/zw8rB/4/

Comments

Has probado ha hacerlo con CSS?

---

seria un poco tedioso hacerlo con css

Answer 1

Elimina el for y coloca esto:

 $(this).animate({'background-position-x': '10px', 'background-position-y': '0'},1000);

Answer 2

Hola Esteban, lo que en realidad necesitas es repetir el proceso N veces, esto se logra con setInterval() metes tu código en una función y se ejecuta sin parar, he hecho un ejemplo de lo que necesitas, lo probé y funciona tal como si fuera video.

http://jsfiddle.net/P5Cme/3/

No entiendo porque no funciona en jsfiddle, pero de que funciona, funciona !

Answer 3

Yo recomendaria hacerlo con HTML5, colocandole directamente un video de fondo. He aqui un articulo relacionado http://bit.ly/17fS1p6

Answer 4

Ojalá que estás url´s te ayuden... le dan una nueva perspectiva:
http://www.seanmccambridge.com/tubular/
http://tympanus.net/Tutorials/BigVideoSlideshow/