Bottom div slide up/down on hover to exact margins

I want the bottom div to slide up down on hover at the bottom of screen. But, I want the text link to move with it. BUT, have the like slide down and stop like bottom:20px so it still visible to slide back up. Here's an example: http://sorendahljeppesen.dk/. Here's what I got so far: (the link isn't set to move with the dive cause it keeps vanishing below the screen on hover).

Jquery:

<script type='text/javascript'>

$(document).ready(function(){
     $("#mp3-text a").hover(function() {
      $("#mp3-player").stop().slideToggle(1000, function () {
        $(noop);
        $("#mp3-player").slideToggle(1000);
      });
     });
});
</script>

CSS:

#mp3-player-holder {
    height:100px;
    width:960px;
    bottom:0;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-ind开发者_开发问答ex:1000;
    overflow:hidden;
    }

#mp3-player {
    height:95px;
    width:100%;
    bottom:0;
    position:absolute;
    border-top:1px solid #ccc;
    border-right:0px;
    border-bottom:0px;
    border-left:0px;
    z-index:1000;
    text-align:center;
    }       

Best way to do it would be to have two separate functions--one that's called onmouseover to slideit up, and one that's called onmouseout to slide it back down. Like this:

function slideup() {
$("#mp3-player").slideToggle(1000);
}

function slidedown() {
$("#mp3-player").slideToggle(1000);
}

And your HTML:

<div id="mp3-text">
 <a href="#" onmouseover="slideup()" onmouseout="slidedown()">hover to slide!</a>
</div>
<div id="mp3-player-holder">
 <div id="mp3-player">&nbsp;</div>
</div>

Or, to make it like the one you linked, put the onmouseout onto the mp3-player div. Then it would slide back down when you removed your mouse from over the entire mp3-player div.