"

From 2011.igem.org

Smooth Image Menu For Jquery

---

</script>

<script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery.js"></script> <script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery-easing-1.3.pack.js"></script> <script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="https://www.student.gsu.edu/~bmehta2/jquery.kwicks-1.5.1.pack.js"></script>

<link href="https://www.student.gsu.edu/~bmehta2/jimgMenukwicks.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"> $(document).ready(function () {

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

}); </script>