"
Team:GeorgiaState/Header
From 2011.igem.org
| Line 1: | Line 1: | ||
__NOTOC__<html lang="en"> | __NOTOC__<html lang="en"> | ||
| + | <head> | ||
| + | |||
</style> | </style> | ||
Revision as of 13:20, 6 July 2011
Smooth Image Menu For Jquery
A dynamic Menu allowing you to easily navigate any content visually, with a Mootools like effect through the power of Jquery javascript.
</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>
