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

Question

我希望底部 div 在悬停在屏幕底部时向上滑动。但是，我希望文本链接随之移动。但是，像 bottom:20px 这样向下滑动并停止，这样它仍然可以看到向上滑动。这是一个例子:http://sorendahljeppesen.dk/ .到目前为止，这是我得到的:(链接未设置为随潜水移动，因为它在悬停时一直消失在屏幕下方)。

J查询:

<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 以将其向上滑动，另一个称为 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 上移开时，它会向下滑动。