trigger link AFTER slide has finished
I'm building a website wich has a menu that slides in from the top. What I'm trying to achieve is dat when a visitor clicks a menuitem (a href) the menupanel slides back up and the visitor will be redirected to the chosen page AFTER the menupanel has finished sliding up.
So basicly what I need is to disable/pause the mousclick, get the value of the href, slide the panel back up and redirect to the new page. Sliding the panel back up is no problem using the slideToggle. I'm using 1000mseconds in order to use some sort of setTimeOut of 1000mseconds for the redirect to the chosen page.
Retrieving the value of the href is no problem using the attr() function. Problem for me is to figure out how to wait until the panel finishes sliding. Firefox goes to the new page immediately after clicking the link so I need to have that disabled somehow.
Code so far:
// this is used to open/close the menupanel
$(".btn-slide").click(function(){
$("#menuslider").slideToggle(1000,"easeOutBounce");
$(this).toggleClass("active");
});
// this is used to close the menupanel after clicking a menuitem
$("#mainmenu a").click(function(){
var lnk = $(this).attr('href');
$("#menuslider").slideToggle(1000,"easeOutBounce");
$(this).toggleClass("active");
});
Any help would be appreciated! Thanks in advance!