2

div にカーソルを合わせると、別の div ( で始まるdisplay:none) が部分的に下向きに展開され、その内容の上部のみが表示されます。jQueryで非表示のdivを部分的に展開するにはどうすればよいですか? できれば、div が下に向かってフェードアウトするようにします。toggle()コマンドのパラメーターやfadeIn()部分展開を許可するパラメーターはないようです。

編集

残念ながら、要件により、個別の「ティーザー」div を使用することは許可されていません。すべてのテキストを含む非表示の div は、部分的に展開する必要があります。

4

3 に答える 3

0

非表示の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-19T21:10:43.803 に答える
0

div 全体を切り替える代わりに、内部のコンテンツをティーザー div とコンテンツ div に分けてから、スニーク ピークが必要なときにティーザー div のみを切り替えます。

于 2012-09-19T20:54:20.407 に答える
0

jQuery の animate 関数を使用してプレビューを表示できます。（ある程度開く）そのdivの下部に透明なグラデーションを持つPNGを追加して、白にフェードさせます。高さ 0px で #contentDiv を開始します。

$("#hoverDiv").hover(
  function(){
    $("#contentDiv").animate({"height":"100px"});
  }, 
  function(){
    $("#contentDiv").animate({"height":"0px"});
  }
);
于 2012-09-19T21:24:16.440 に答える