CODEWITHSUNDEEP
jqueryjquery-animate
emilium
emilium

Reputation: 3

Slide up hidden divs with absolute top

I'm trying to show hidden div on hover from the bottom of the visible div. The hidden div should be with absolute top position reaching the top of the container. The problem is that hidden div is cutting the content on hover. Any suggestions how to prevent it?

Here is my code 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);
});

Upvotes: 0

Views: 617

Answers (1)

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

How about using overflow ? 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;
}

UPDATE

The growing version : http://jsfiddle.net/rw5hz0cr/6/

UPDATE

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

Upvotes: 1

Related Questions