jQuery slideUp and slideDown as page transitions

Question

I would like to make my website to do some page transitions but I have some trouble (maybe it is not a big problem but I am still unable to solve)

OK, here is my plan:

My plan is, when a page loads, the can slideDown so i did the following:

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

The velocity can make sure the speed of the slideDown can be calculated in pixels. So, longer page longer duration.

In the other hand, when I submit a form or click on a hyperlink, the page can slideUp then go to the page where it should be go to. Some of you may know the problem is that actually there is no time for the animation to do. Before the animation starts, the page has changed. So I coded event.preventtDefault() to stop it. Yeah, it stopped though, the event is actually removed so it didn't go anywhere. Anyway here is code:

    $('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();
    });
});

P.S.: Because of the CSS is brought by purecss.io so some links didn't have a href to go to (all the means, the slideUp works actually if the hyperlink does not have a href attrubute), so if the does not have href don't make the page slideUp.

I know what is going wrong but I don't know how to solve it. Any ideas?

---

HTML code using

<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

Answer here, thanks everyone who helped me, I appreciate it. James may be right, I shouldn't use page transitions. Simple is always the best. (Actually the effect not working properly in some situation)

$(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');
        });
    });
});

For the guys who have a simple website, feel free to copy and use it. (or I would not post here) For the guys who want to know the problem, well ...

1. The links won't be opened in a new window whether i put target="_blank" or not. Actually you can fix (browse another question in StackOverflow and you will find it)

2. You will get stuck if you want to process form during submit. I have some JavaScript to check the input data of the form before submit it to the PHP page. It will engage the effect before the checkForm(). What I want to tell is if checkForm() return false, no document will be ready. All the means the page won't slide down again. i.e. YOU STUCKED! lol