javascript - 部分扩展 div 以预览内容

Question

当我将鼠标悬停在一个 div 上时，我希望另一个 div（以 开头display:none）部分向下扩展，仅显示其内容的顶部。如何使用 jQuery 部分扩展隐藏的 div？最好使 div 向底部淡出。该命令似乎没有参数toggle()或fadeIn()允许部分扩展。

编辑

不幸的是，要求不允许使用单独的“预告片”div。包含所有文本的隐藏 div 必须部分展开。

Answer 1

而不是切换整个 div，将内部内容分成一个预告片 div 和一个内容 div，然后在你想要偷偷摸摸的时候只切换预告片 div

Answer 2

假设您只想显示隐藏 div 的前 30 个像素：

var HowManyPixelsToShow = 30;

$(body).on({
   mouseenter: function() { ShowInfoBoxDiv($(this)); },
   mouseleave: HideInfoBoxes
}, '.info-box');

function ShowInfoBoxDiv(TheInfoBox) {
   //this assumes the 'more-info' divs are located after the '.info-box' divs
   TheInfoBox.next('.more-info') 
             .css('overflow':'hidden')
             .height(HowManyPixelsToShow)
             .slideDown(500);
}

function HideInfoBoxes() {
  $('.more-info').hide();
}

Answer 3

您可以使用 jQuery 的动画功能来显示预览。（打开一定量）在该div的底部添加一个具有透明渐变的PNG，使其淡化为白色。#contentDiv 以 0px 的高度开始。

$("#hoverDiv").hover(
  function(){
    $("#contentDiv").animate({"height":"100px"});
  }, 
  function(){
    $("#contentDiv").animate({"height":"0px"});
  }
);