Hola a todos, soy un estudiante de diseño gráfico que trabaja en una línea de tiempo interactiva para un proyecto. Esta línea de tiempo utiliza eventos llamados de IMG singulares que, cuando se pasa el cursor sobre ellos, cambian su src a un gif de transición, que luego de un retraso se reemplaza nuevamente con un gif inactivo que se repite.

Al hacer clic, sucede algo similar.

Sé muy poco sobre Jquery y Javascript, pero he tratado de crear algo que funcione lo mejor que pueda.

Lo que pido es ayuda con algunos de los "errores", hay algunos que conozco y los enumeraré aquí:

1. Después de que mouse_leave se ha activado cuando el mouse vuelve a ingresar al img, el código parece usar solo el gif inactivo y no el de transición.
2. Se puede hacer clic en la imagen varias veces, lo que hace que la animación se repita.
3. si se hace clic en el icono demasiado pronto, se activa el retardo y luego se sobrescribe la nueva animación.

Con suerte, he explicado esos problemas lo suficientemente bien, aquí está el sitio web para que pueda ver los problemas que tengo: http://theinfiniteyear.co.uk/

Y este es el código del sitio:

 $(document).ready(function() { //event1 $("#event1").mouseenter(function() { $(this).attr("src", "images/event_1_enter.gif").delay(2000).queue(function(next) { $(this).attr("src", "images/event_1_hover.gif") }); $("#event1").mousedown(function() { $(this).attr("src", "images/event_1_click.gif") }); $("#event1").click(function() { setTimeout(function() { window.location.href = 'artytest.html'; }, 5000) }); $("#event1").click(function() { setTimeout(function() { $("#background").removeClass("hiddenobject"); }, 3500); }); $("#event1").mouseleave(function() { $(this).attr("src", "Images/event_1_initial.gif") }); }); });

Lo siento por ser tan largo, miraré otras publicaciones que pueden ayudar, pero pensé que sería mejor preguntar aquí directamente en lugar de buscar en muchos foros. Puedo proporcionar más información si me lo piden. Gracias por adelantado.