當我將鼠標懸停在div上時，我想要另一個div（開頭爲display:none）向下部分展開，僅顯示其內容的頂部。我怎樣才能用jQuery部分擴展一個隱藏的div？優選地，使得div向底部淡出。似乎不存在允許部分擴展的toggle()命令或fadeIn()的參數。部分擴展div以預覽內容

編輯

不幸的是，要求不允許使用一個單獨的「傳情」 DIV。包含所有文本的隱藏div必須部分展開。

來源

2012-09-19 bevanb

比方說，你要只顯示前隱藏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(); 
}

來源

2012-09-19 21:10:43 frenchie

不，我不是爲了5美元:)我是爲了樂趣而做的！祝你好運。 – frenchie

，而不是切換整個DIV，內內容分成傳情DIV和內容DIV，然後切換隻有傳情DIV當你想一睹爲快

來源

2012-09-19 20:54:20 Kristian

這是一個很好的解決基本問題的方法。不幸的是，規格不允許單獨的預覽div。我剛更新了這個問題。 – bevanb

您可以使用jQuery的animate函數來顯示預覽。（打開一定數量）將一個帶有透明漸變的PNG添加到該div的底部，使其淡入到白色。以0px的高度開始#contentDiv。

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

來源

2012-09-19 21:24:16 Tim

部分擴展div以預覽內容

編輯

回答

相關問題