ボトムdivをホバー上で上下にスライドさせて正確なマージンにする

Question

ボトムdivを画面下のホバー上にスライドさせたい。しかし、私はそれと一緒にテキストリンクを移動したい。しかし、スライドを下にスライドさせて、下のように停止します：20pxなので、それはまだ後ろにスライドするように見えます。ここに例があります：http://sorendahljeppesen.dk/。これまでのところ、私はこれまで何を得ているのですか（リンクはダイビングの理由で移動するように設定されていないため、ホバー上の画面の下に消えてしまいます）。

の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-index: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; 
    }  

Answer 1

ベスト、それは二つの別々の機能を持っているだろう行う方法 - アップslideitするのonmouseoverと呼ばれています1、および1つのONMOUSEOUTと呼ばれていますそれを元に戻す。このように：

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

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

そして、あなたの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> 

それとも、あなたがリンク1のようにそれを作るために、mp3-player divの上に置かれるonmouseoutを。次に、mp3-player div全体からマウスを削除したときに、それが元に戻されます。