Este escrito ha sido probado por nuestros expertos para asegurar la exactitud de nuestro contenido.
Solución:
No, no puedes controlar la animación de las imágenes.
Necesitaría dos versiones de cada imagen, una animada y otra no. Al pasar el mouse, puede cambiar fácilmente de una imagen a otra.
Ejemplo:
$(function()
$('img').each(function(e)
var src = $(e).attr('src');
$(e).hover(function()
$(this).attr('src', src.replace('.gif', '_anim.gif'));
, function()
$(this).attr('src', src);
);
);
);
Actualizar:
El tiempo pasa y las posibilidades cambian. Como señaló kritzikatzi, tener dos versiones de la imagen no es la única opción, aparentemente puedes usar un elemento de lienzo para crear una copia del primer cuadro de la animación. Tenga en cuenta que esto no funciona en todos los navegadores, IE 8, por ejemplo, no es compatible con el elemento lienzo.
Me doy cuenta de que esta respuesta es tardía, pero encontré una solución bastante simple, elegante y efectiva para este problema y sentí que era necesario publicarla aquí.
Sin embargo, una cosa que siento que debo dejar en claro es que esto no inicia la animación gif al pasar el mouse, la pausa al alejar el mouse y continúa cuando pasa el mouse nuevamente. Eso, desafortunadamente, es imposible de hacer con gifs. (Se puede hacer con un string de imágenes que se muestran una tras otra para que parezcan un gif, pero desarmar cada cuadro de sus gifs y copiar todas esas URL en un script llevaría mucho tiempo)
Lo que hace mi solución es hacer que una imagen parezca que comienza a moverse al pasar el mouse. Haces que el primer cuadro de tu gif sea una imagen y colocas esa imagen en la página web, luego reemplazas la imagen con el gif al pasar el mouse y parece que comienza a moverse. Se reinicia en mouseout.
Simplemente inserte este script en la sección principal de su HTML:
$(document).ready(function()
$("#imgAnimate").hover(
function()
$(this).attr("src", "GIF URL HERE");
,
function()
$(this).attr("src", "STATIC IMAGE URL HERE");
);
);
Y pon este código en la etiqueta img de la imagen que quieres animar.
id="imgAnimate"
Esto cargará el gif al pasar el mouse, por lo que parecerá que su imagen comienza a moverse. (Esto es mejor que cargar el gif onload porque entonces la transición de static la imagen a gif está entrecortada porque el gif comenzará en un marco aleatorio)
para más de una imagen solo recrear el guion crear una función:
Ese bloque de código es una página web en funcionamiento (según la información que me ha proporcionado) que mostrará el static imágenes y al pasar el mouse, cargue y muestre los gif. Todo lo que tienes que hacer es insertar la URL para el static imágenes
Creo que el complemento de jQuery freezeframe.js podría resultarle útil. freezeframe.js es un complemento de jQuery para pausar automáticamente los GIF y reiniciar la animación al pasar el ratón por encima.
Supongo que puedes adaptarlo fácilmente para que funcione en la carga de la página.
Si tienes algún contratiempo o disposición de enriquecer nuestro división puedes dejar una acotación y con placer lo ojearemos.