修改

Question

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

修改

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

Answer 1

而不是切换整个div，将内部内容分成teaser 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的动画功能来显示预览。（打开一定数量）将一个带透明渐变的PNG添加到该div的底部，使其淡化为白色。启动＃heightDiv，高度为0px。

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

部分扩展div以预览内容

修改

3 个答案: