向上滑动/向下滑动

Question

I have a slide up and slide down effect on two of my pages, the problem is once the About slide is up, if I click on the contact link, it flashes to the contact page before sliding down. For some reason the jquery of both slides are formatted the same, but it doesn't seem to happen if i click the about link when the contact slide is up. I am not sure what the problem is, I was hoping you guys could help me fix it.

I uploaded it to my host so you guys could see it for yourself. http://maximsiebert.com/unamed/Untitled-1.html

Here is my jQuery

 $(document).ready(function() {
 $('.contact').click(function () {
      if ($('#aboutpage').is(":visible")) {
        $('#aboutpage').slideUp(800)
        $('#portfolio').slideDown(800)  
        $('#portfolio').slideUp(800)
        $('#contactpage').slideDown(800)   
      }
      else if ($('#contactpage').is(":visible")) { 
      $('#contactpage').slideUp(1000) 
      $('#portfolio').slideDown(1000) 
      }
       else if ($('#contactpage').is(":hidden")) { 
      $('#portfolio').slideUp(1000) 
      $('#contactpage').slideDown(1000) 
      $('html, body').animate({scrollTop:0}, 'slow');
      }
      });

});

 $(document).ready(function() {
 $('.about').click(function () {
      if ($('#contactpage').is(":visible")) {
        $('#contactpage').slideUp(800)
        $('#portfolio').slideDown(800)  
        $('#portfolio').slideUp(800)
        $('#aboutpage').slideDown(800)   
      }
      else if ($('#aboutpage').is(":visible")) { 
      $('#aboutpage').slideUp(1000) 
      $('#portfolio').slideDown(1000) 
      }
       else if ($('#aboutpage').is(":hidden")) { 
      $('#portfolio').slideUp(1000) 
      $('#aboutpage').slideDown(1000) 
      $('html, body').animate({scrollTop:0}, 'slow');
      }
      });

});

Answer 1

Generally you should wait the shown page to slideDown and after that to slideUp the new page.

So you should use the following approach:

$('.about').click(function () {
  .... if contact page is shown ...

  $('#aboutpage').slideDown(800, function() {
     $('#aboutpage').slideUp(800);
  });
  .....

});