Jquery slideUp и slideDown, как переходы страниц

Question

Я хотел бы сделать свой веб-сайт, чтобы сделать некоторые переходы страниц, но у меня есть некоторые проблемы (может быть, это не большая проблема, но я до сих пор не в состоянии решить)

OK, вот мой план:

Мой план, когда страница загружается, баллончик slideDown так я сделал следующее:

$(document).ready(function() { 
    var velocity = ($('#main').height()/500) * 1000; 
    $('#main').css('display', 'none'); 
    $('#main').slideDown(velocity); 

скорость может убедиться, что скорость slideDown можно рассчитать в пикселях. Таким образом, более длинная страница более длительная.

С другой стороны, когда я отправляю форму или нажимаю на гиперссылку, страница может перемещаться по экрану, а затем переходить на страницу, куда нужно перейти. Некоторые из вас могут знать, что проблема в том, что на самом деле нет времени для анимации. Перед началом анимации страница изменилась. Поэтому я закодировал event.preventtDefault(), чтобы остановить его. Да, это было прекращено, хотя, событие действительно удалено, чтобы оно никуда не денулось. Во всяком случае здесь код:

$('form').submit(function(event) { 
     event.preventDefault(); 
     var velocity = ($('#main').height()/500) * 1000; 
     $('#main').slideUp(velocity); 
     $('form').submit(); 
    }); 

    $('a').click(function(event) { 
     event.preventDefault(); 
     if($('a').attr('href') != '') { 
      var velocity = ($('#main').height()/500) * 1000; 
      $('#main').slideUp(velocity); 
     } 
     $(this).click(); 
    }); 
}); 

PS: Из-за CSS приносится purecss.io поэтому некоторые ссылки не имеют HREF, чтобы пойти (все средства, то slideUp работает на самом деле, если гиперссылка не иметь href attrubute), поэтому, если у него нет href, не делайте слайд-страницу страницы.

Я знаю, что происходит не так, но я не знаю, как его решить. Есть идеи?

---

HTML код с помощью

<ul> 
    <li><b><a>Menu</a></b></li> 
    <li><a href="?action=index">Index</a></li> 
    <li><a href="?action=announcement">Announcement</a></li> 
    <li><a href="?action=sysmsg">System Message</a></li> 
</ul> 

Answer 1

Ответьте здесь, спасибо всем, кто мне помог, я ценю это. Возможно, Джеймс прав, я не должен использовать переходы страниц. Простой всегда лучший. (На самом деле эффект не работает должным образом в некоторых ситуациях)

$(document).ready(function() { 
    $('#main').css('display', 'none'); 
    $('#main').slideDown($('#main').height()); 

    $('a').click(function(event) { 
     event.preventDefault(); 
     url = $(this).attr('href'); 
     if(url !== '' && url.length > 0) { 
      $('#main').slideUp($('#main').height(), function() { 
       window.location = url; 
      }); 
     } 
    }); 

    $(':submit').click(function(event) { 
     event.preventDefault(); 
     $('#main').slideUp($('#main').height(), function() { 
      $('form').trigger('submit'); 
     }); 
    }); 
}); 

Для ребят, которые имеют простой веб-сайт, не стесняйтесь копировать и использовать его. (или я бы не публиковал здесь) Для ребята, которые хотят знать проблему, хорошо ...

1. Ссылки не будут открываться в новом окне, не было ли цель target = "_ blank" или не. На самом деле вы можете исправить (просмотреть другой вопрос в StackOverflow, и вы его найдете)

2. Вы будете застревать, если хотите обработать форму во время отправки. У меня есть JavaScript для проверки входных данных формы перед отправкой на страницу PHP. Он задействует эффект перед checkForm(). Я хочу сказать, что если checkForm() возвращает false, документ не будет готов. Все средства страницы не будут скользить вниз. т. е. ВЫ ОСТАЛИСЬ! lol

Answer 2

Вы можете использовать функцию обратного вызова из функции slideUp или slideDown. Это будет называться только после завершения анимации. Внутри обратного вызова вы можете использовать JavaScript для изменения местоположения браузера (который, я думаю, вам нужен). Что-то вроде этого:

$('a').on('click', function(e) { 
    e.preventDefault(); 

    if ($(this).attr('href') !== '') { 

     $('#main').slideUp(velocity, function() { 

      var url = $(this).attr('href'); 

      window.location = url; 

     }); 

    } 

});