Анимация скольжения скрывает div во время анимации

У меня есть следующий код: http://jsfiddle.net/4QF4C/7/

Когда вы нажимаете Click Me! , почему он скрывает красный квадрат во время анимации, а затем показывает его после окончания анимации?

HTML:

<div class="container">  
    <div class="static-box">
        This is a static box that isn't effected by JQuery.
        <div class="dot"></div>
    </div>
    <div class="box">
        This is just some text.
        <div class="dot"></div>
    </div>
    <a href="#">Click Me!</a>
</div>

CSS:

.container {
    border-left: 5px solid black;
    position: relative;
    padding: 10px;
    height: 250px;
    width: 550px;
}

.static-box {
    width: 500px;
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    background-color: lightgrey;
    border: 1px solid black;
}

.box {
    width: 500px;
    position: relative;
    padding: 10px;
    background-color: lightgrey;
    border: 1px solid black;
    display: none;
}

.dot {
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    top: 50%;
    left: -21px;
    margin-top: -7px;
}

JQuery:

$('a').click(function() {
    $(".box").hide().slideDown();
    $("a").hide();
});