Hello,
I am not very good with jquery and was wondering how I could improve this simple menu I have made here: [edit: removed]. The menu of concern is the main tabbed menu towards the top left of page. The problem is handling the effects queue. If a user mouses back and forth over the tabs quickly, the tabs exhibit weird behavior as can be demonstrated with linked page. Below is the code utilizing the latest version of JQuery. Thanks in advance for any assistance regarding the improvement of this code.
EDIT: I think I fixed it using a callback function and stopping the previous animations.
I am not very good with jquery and was wondering how I could improve this simple menu I have made here: [edit: removed]. The menu of concern is the main tabbed menu towards the top left of page. The problem is handling the effects queue. If a user mouses back and forth over the tabs quickly, the tabs exhibit weird behavior as can be demonstrated with linked page. Below is the code utilizing the latest version of JQuery. Thanks in advance for any assistance regarding the improvement of this code.
HTML:
<script type="text/javascript">
$(document).ready(function(){
setupnavtab(".menu-1-1-2","#navbar-girls");
setupnavtab(".menu-1-2-2","#navbar-boys");
setupnavtab(".menu-1-3-2","#navbar-babys");
setupnavtab(".menu-1-4-2","#navbar-diy");
setupnavtab(".menu-1-5-2","#navbar-rooms");
});
var lastselector;
var timeout;
function setupnavtab(id, selector) {
$(id).hover(function(){
if (lastselector != selector) {
// $('#navbar-inner').children().hide();
if (lastselector != null) {$(lastselector).hide();}
lastselector = selector;
$(selector).fadeIn('slow');
}
},function() {});
$("#navbar").hover(function() {}, function(){
if(lastselector != null) timeout = setTimeout("$('" + lastselector + "').hide()",500);
lastselector = null;
});
}
</script>
EDIT: I think I fixed it using a callback function and stopping the previous animations.