I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances when the sub-menu just "pops up" without animating its width.
You can see The Fiddle showcasing the problem.
This is the code I am using:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Check for "jsub-menu" Class
return false;
} else {
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) {
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
});
var get_width = j('.active').next('ul.sub-menu').outerWidth(true);
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true);
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true);
j('.active').next('ul').removeClass('sub-menu')
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () {
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000);
});
}
}, function () {
j('.active').removeClass('active');
});
});
I suspect that the conflict between my Slide Up/Down animations and animate width/height functions might be causing this issue, despite trying different combinations of stop() methods. I've been struggling with this for days now, so any help or insights from you would be greatly appreciated.
Thank you!!