PhatFusion ImageMenu in JQuery
Hi all,
I recently discovered and became a big fan of JQuery.
Would anyone here be kind / knowledgable enough to help me with this lil' issue...?
My current task is to create a JQ version of a mootools effect called ImageMenu, available from PhatFusion.
The problem: it seems to 'remember' all my hovers. For example, if i hover over one image and off again it's nice and smooth. But if I move my mouse around, it continues to expand and contract for ages after i move the mouse away.
A stripped down demo is here: http://www.galeriesensuelle.com/index3.asp
The code I'm using is:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hannys Image Menu</title>
<script type="text/javascript" src="/template/includes/jq/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".imageMenuLink").hover(function() {
$(this).removeClass('off');
$(this).addClass('on');
$(".off").animate({
width: 90
}, 500 );
$(".on").animate({
width: 510
}, 500 );
}, function() {
$(this).removeClass('on');
$(this).addClass('off');
$(".off").animate({
width: 170
}, 500 );
}
);
});
</script>
<style type="text/css">
#jqImageMenu {
position: relative;
width: 860px;
height: 340px;
overflow: hidden;
background:white;
}
ul.hannyImageMenu {
list-style: none;
margin: 0px;padding:0px;
display: block;
height: 340px;
width: 2500px;
background:pink;
}
li.imageMenuItem {
float: left;
margin:0px;padding:0px;
}
a.imageMenuLink {
text-indent: -1000px;
padding:0px;margin:0px;
background:#FFFFFF none repeat scroll 0%;
border-right: 3px solid #000;
cursor:pointer;
display:block;
overflow:hidden;
height:340px;
width:170px;
}
/*a.off {
width:170px;
}
a.on {
width:510px;
}*/
li#boudoir a {background: url(/images/photography/boudoir-bw.jpg) repeat scroll 0%;}
li#weddings a {background: url(/images/photography/weddings-bw.jpg) repeat scroll 0%;}
li#portraits a {background: url(/images/photography/portrait-bw.jpg) repeat scroll 0%;}
li#events a {background: url(/images/photography/events-bw.jpg) repeat scroll 0%;}
li#commercial a {background: url(/images/photography/commercial-bw.jpg) repeat scroll 0%;}
li#boudoir a:hover {background: url(/images/photography/boudoir.jpg) repeat scroll 0%;}
li#weddings a:hover {background: url(/images/photography/weddings.jpg) repeat scroll 0%;}
li#portraits a:hover {background: url(/images/photography/portrait.jpg) repeat scroll 0%;}
li#events a:hover {background: url(/images/photography/events.jpg) repeat scroll 0%;}
li#commercial a:hover {background: url(/images/photography/commercial.jpg) repeat scroll 0%;}
</style>
</head>
<body>
<div id="jqImageMenu">
<ul class="hannyImageMenu">
<li class="imageMenuItem" id="boudoir"><a href="#" class="imageMenuLink off">Landscapes</a></li>
<li class="imageMenuItem" id="weddings"><a href="#" class="imageMenuLink off">People</a></li>
<li class="imageMenuItem" id="portraits"><a href="#" class="imageMenuLink off">Nature</a></li>
<li class="imageMenuItem" id="events"><a href="#" class="imageMenuLink off">Urban</a></li>
<li class="imageMenuItem" id="commercial"><a href="#" class="imageMenuLink off">Abstract</a></li>
</ul>
</div>
</body>
</html>