底部div在悬停时向上/向下滑动到精确的边距

Question

我希望底部的div滑下来悬停在屏幕的底部。但是，我希望文本链接与它一起移动。但是，让like向下滑动，并像底部一样停止: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

最好的方法是使用两个独立的函数--一个调用onmouseover to slideit up，另一个调用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>

或者，将onmouseout放到mp3-player div上，使其与您所链接的文件类似。然后，当您从整个mp3-player div上移走鼠标时，它将重新滑下。