用绝对顶部滑动隐藏的div

时间:2014-12-15 19:09:50

标签: jquery jquery-animate

我正试图在可见div的底部悬停显示隐藏的div。隐藏的div应该是绝对顶部位置到达容器的顶部。问题是隐藏的div正在削减悬停时的内容。有什么建议怎么预防呢?

这是我的代码http://jsfiddle.net/emilium/rw5hz0cr/3/

var mh = $(".list-item").outerHeight();
$('.long-view').parent().css({position: 'relative', height: mh + 'px'});
$(".list-item").hover(function () {
  $(this).find(".long-view").css({
    visibility: "visible",
    top: mh + 'px',
    height: 0 + 'px',
    z: 100
  }).stop().animate({
    top: 0,
    height: mh,
   }, 1000);

}).mouseleave(function () {
$(this).find(".long-view").css({
    visibility: "hidden"
}).clearQueue().animate({
    height: "toggle"
}, 1500);
});

1 个答案:

答案 0 :(得分:1)

使用溢出怎么样? http://jsfiddle.net/rw5hz0cr/5/

.long-view {
    visibility: hidden;
    background-color: #fff;
    border-top: 10px solid #E8E7E5;
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 200px;
    background: yellow;
    overflow:auto;
}

<强>更新

不断增长的版本:http://jsfiddle.net/rw5hz0cr/6/

<强>更新

http://jsfiddle.net/rw5hz0cr/7/