SuperFish jQuery Menu

[Presto-X]

Hello everyone,

 

I'm using the superfish menu on a site I'm building and I'm wanting the sub menu items to fade in and slide down at the same time and then on mouse out fade out and slide back up.  I have the fade in and slide down / up working, but I have not been able to get the fade out to work with the slide up effect.  Can someone with a bit more JavaScript experience take a look at my script and see what I'm missing for the mouse out state.

 

It feels like I'm getting really close to being done with this script.

 

Thanks everyone.

 

/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* 	http://www.opensource.org/licenses/mit-license.php
* 	http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/

;(function($){
$.fn.superfish = function(op){
	var sf = $.fn.superfish,
		c = sf.c,
		$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
		over = function(){
			var $$ = $(this), menu = getMenu($$);
			clearTimeout(menu.sfTimer);
			$$.showSuperfishUl().siblings().hideSuperfishUl();
		},
		out = function(){
			var $$ = $(this), menu = getMenu($$), o = sf.op;
			clearTimeout(menu.sfTimer);
			menu.sfTimer=setTimeout(function(){
				o.retainPath=($.inArray($$[0],o.$path)>-1);
				$$.hideSuperfishUl();
				if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
			},o.delay);	
		},
		getMenu = function($menu){
			var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
			sf.op = sf.o[menu.serial];
			return menu;
		},
		addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
	return this.each(function() {
		var s = this.serial = sf.o.length;
		var o = $.extend({},sf.defaults,op);
		o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
			$(this).addClass([o.hoverClass,c.bcClass].join(' '))
				.filter('li:has(ul)').removeClass(o.pathClass);
		});
		sf.o[s] = sf.op = o;
		$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
			if (o.autoArrows) addArrow( $('>a:first-child',this) );
		})
		.not('.'+c.bcClass)
			.hideSuperfishInit();
		var $a = $('a',this);
		$a.each(function(i){
			var $li = $a.eq(i).parents('li');
			$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
		});
		o.onInit.call(this);
	}).each(function() {
		var menuClasses = [c.menuClass];
		if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
		$(this).addClass(menuClasses.join(' '));
	});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
	var o = sf.op;
	if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
		this.toggleClass(sf.c.shadowClass+'-off');
	};
sf.c = {
	bcClass     : 'sf-breadcrumb',
	menuClass   : 'sf-js-enabled',
	anchorClass : 'sf-with-ul',
	arrowClass  : 'sf-sub-indicator',
	shadowClass : 'sf-shadow'
};
$(document).ready(function() {
$("li.current_page_item").addClass("current_page_ancestor");
 });
sf.defaults = {
	hoverClass		: 'sfHover',
	pathClass		: 'overrideThisToUse',
	pathLevels		: 1,
	delay			: 800,
	animationOpen	: {height:'show'},
	animationClose 	: {height:'hide'},
	speed			: 'normal',
	autoArrows		: false,
	dropShadows 	: false,
	disableHI		: false,		// true disables hoverIntent detection
	onInit			: function(){}, // callback functions
	onBeforeShow	: function(){},
	onShow			: function(){},
	onHide			: function(){}
};
$.fn.extend({
	hideSuperfishInit : function(){
		var o = sf.op,
			not = (o.retainPath===true) ? o.$path : '';
		o.retainPath = false;
		var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
				.find('>ul').hide().css('visibility','hidden');
		o.onHide.call($ul);
		return this;
	},
	hideSuperfishUl : function(){
		var o = sf.op,
			not = (o.retainPath===true) ? o.$path : '';
		o.retainPath = false;
		var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
				.find('>ul').animate(o.animationClose, o.speed, function() { $(this).css('visibility','hidden'); 
		}); 
		o.onHide.call($ul);
		return this;
	},
	showSuperfishUl : function(){
		var o = sf.op,
			sh = sf.c.shadowClass+'-off',
			$ul = this.addClass(o.hoverClass)
				.find('>ul:hidden').css('visibility','visible');
		sf.IE7fix.call($ul);
		o.onBeforeShow.call($ul);
		$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
		return this;
	}
});
})(jQuery);

[trq]

Where is *your* code?

[Presto-X]

I have changed the main superfish script it was attached in my first comment, but here is also the code I use the call it.

 

jQuery(document).ready(function($){
$('ul.menu').superfish({
  delay:'500',
  animation:{
    opacity:'show',
    height:'show'
  },
  speed:'normal'
});
});

[Presto-X]

I'm guessing ether the hideSuperfishInit or hideSuperfishUl functions are missing the needed fade out effect that the showSuperfishUl function is using, but it looks like it is written almost the same, it looks like they are both using animate.