$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div#imagemenu ul li a').hover(function() {  
    // if the element is currently being animated
    if ($(this).is(':animated')) {
      $(this).addClass("active").stop().animate({width: "293px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      $(this).addClass("active").stop().animate({width: "293px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if ($(this).is(':animated')) {
      $(this).removeClass("active").stop().animate({width: "112px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      $(this).removeClass("active").stop(':animated').animate({width: "112px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
    }
  });
});