2013-02-19 1 views
0

Привет, я долго терзал свой мозг. Я создаю меню, которое падает с помощью функции hide в jquery. Я хочу, чтобы моя панель меню скрывалась, когда был выбран мой тег li, затем страница переходит к следующей странице на моем сайте.Jquery hide() onclick перед тем, как страница выгружается

Все, что я получаю в тот момент, когда выбран якорный тэг, заключается в том, что меню просто исчезает.

Это JQuery:

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

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

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

Это 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> 

Я пытался использовать выгрузку и .onbeforeunload, но я не могу получить мою голову вокруг него. Если у кого-то есть идеи или я могу указать мне в правильном направлении, я бы так поблагодарил полностью

+0

Есть ли художественная причина для того, чтобы скрыть меню до того, как вы изменили страницу? похоже, вы не используете ajax для загрузки своего содержимого, поэтому, как только кто-то нажимает на ссылки в меню, браузер перейдет к следующей странице. – cernunnos

+0

Это артистично, да, я знаю, что заставить пользователя подождать до следующей перезагрузки страницы - это плохая практика. Я подумал об этом, и я думаю, что короткое 2 секунды близко не помешает пользователям, но увеличит его. – user2086702

+0

Хорошо, вы найдете полезную информацию о слайд-шоу/слайд-шоу, fadeIn/fadeOut, show/hide и т. Д. Здесь: http://api.jquery.com/category/effects/ – cernunnos

ответ

0

Функции jQuery show() и hide() являются неотложными. Если вы намерены оживить эти элементы, вам нужно добавить скорость аргумент:

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

Это говорит, как большая часть вашей анимации на самом деле будет работать, зависит от того, как быстро браузер загружает следующую страницу с сервера.

Если вы хотите, чтобы ваша анимация запустить первый, к завершению, и затем по ссылке пользователь щелкнул, я бы избавиться от onbeforeunload вещи и попробовать что-то вроде этого:

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

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

    return false; 
}); 
+0

Удивительно, что это никогда не понадобится, Эллиот Нельсон, вы тот человек. Два больших пальца вверх. – user2086702

0

Изменение вашего сценарий к этому ...

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

    $("li.hide_nav a").click(function(e){ 
     e.preventDefault(); 
     var href = this.href; 
     $(".slidingDiv").slideUp(500, function() { 
      window.location.href = href; 
     }); 
    }); 
}); 

Он обрабатывает события щелчка по ссылкам в li элементов и в первую очередь останавливает их от действия. Это означает, что slideUp() может выполнить, а затем запустить функцию обратного вызова, которая обрабатывает перемещение, которое было бы вызвано щелчком ссылки.

Смежные вопросы