Jquery: o mouse sobre o div slide

Aqui está o meu códigohttp://jsfiddle.net/AB6J3/7/ você pode ver, editar etc.

Quando rolar para a caixa de borda vermelha, a caixa laranja deve deslizar para cima e, com o mouse, deslizar para baixo. funciona bem para o outro lado, mas quando altero slideDown para slideUp, ele não funciona: / o que estou perdendo?

Aprecio ajuda.

<!DOCTYPE html>
<html>
<head>
  <style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }

#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">    
    <div id="monster"></div>
    <div id="clickk"></div><br />
    <div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>

<script>
$("#clickk").hover(function () {
    if ($("#monster").is(":hidden")) {
        $("#monster").slideDown("fast");
    } else {
        $("#monster").slideUp("fast");
    }
});

</script>

</body>
</html>​

questionAnswers(2)

yourAnswerToTheQuestion