Jquery hide() onclick before the page unloads

Question

Hi i've been racking my brain for days. I'm creating a menu that drops down using the hide function in jquery. I want my menu bar to hide when my li tag is selected then the page navigates away to the next page in my site.

All that I get at the moment, when the anchor tag is selected, is that the menu just disappears.

This is the jquery:

$(document).ready(function(){
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $(".show_hide").click(function(){ 
        $(".slidingDiv").slideToggle(); 
    });

    $(window).onbeforeunload(function() {
        $(".slidingDiv").hide();
});
});

This is the html:

    <div id="mobnav-wrapper">
    <div id="logo-top-mob"> 
        <a href="index.html"><img src="images/logo-mob.png" width="163" height="21" /></a>
    </div>

<div id="mob-button"> 
        <a href="#" class="show_hide"><img src="images/mob_button.png" width="33" height="24" /></a>

</div>
<div class="slidingDiv">
    <ul> 
        <li class="hide_nav"><a href="work.html"> Work </a></li>
        <li class="hide_nav"><a href"services.html" >Services</a></li>
        <li class="hide_nav"><a href"clients.html" >Clients</a></li>
        <li class="hide_nav"><a href"about.html" >About</a></li>
            <li class="hide_nav"><a href"contact.html" >Contact</a></li>
        <li class="hide_nav"><a href"follow.html" >Follow</a></li>
    </ul> 
</div>  

I have tried to use the unload and .onbeforeunload but I can't get my head around it. If anyone has ideas or can point me in the right direction, I would be so so so thank full

Answer 1

The jQuery functions show() and hide() are immediate. If you were intending to animate these elements, you need to add a speed argument:

$(window).onbeforeunload(function () {
  $('.slidingDiv').hide('fast');
});

That said, how much of your animation will actually run depends on how quickly the browser loads the next page from your server.

If you want your animation to run first, to completion, and then follow the link the user clicked, I would get rid of the onbeforeunload stuff and try something like this:

$(document).on('click', '.slidingDiv a', function () {
  var link = $(this);

  $('.slidingDiv').hide('slow', function () {
    location.href = link.attr('href');
  });

  return false;
});