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

最好的办法是拥有两个独立的功能 - 一个叫做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上移除鼠标时，它会向下滑动。

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

1 个答案: