Hi everyone I'm a Graphic Design student working on an interactive timeline for a project. This timeline uses singular IMG's called events which when hovered over have their src changed to a transitional gif, which following a delay is then again replaced with an idle gif that repeats.

On click, something similar happens.

I know very little about Jquery and Javascript but have tried to build something that functions to the best of my novice ability.

What i'm asking for is help with some of the "Bugs" there are a few that I know of and I'll list them here:

1. After mouse_leave has been triggered upon the mouse re-entering the img, the code seems to only use the idle gif and not the transitional one.
2. The img can be clicked multiple times causing the animation to repeat.
3. if the icon is clicked too early the delayed triggers then overwrite the new animation.

Hopefully, I've explained those issues well enough, here's the website so you can look at the issues I'm having: http://theinfiniteyear.co.uk/

And this is the code for the site:

$(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")
    });
  });
});

Sorry for this being so long, I'll be looking at other posts that may help but I thought it would be best to ask on here directly rather than dig through loads of forums. I can provide more info if asked. Thanks in advance.