jQuery插件用於在懸停上展開文本？

Question

我知道我在網上看到類似的東西，但我沒有一個很好的例子。我希望可能會有某種插件與我可以設計的結構集合。

希望完成這樣的事情：http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

任何想法？

Answer 1

（注：參見編輯例如在底部更強大的解決方案）的jQuery

的一點是能夠輕鬆地完成只是這種動態的行爲，所以我不認爲你需要一個特殊的插件。 Click here to see the following code in action

HTML

<div id="container"> 
    <div id="hover-area">HOVER</div> 
    <div id="caption-area"> 
     <h1>TITLE</h1> 
     <p>Caption ipsum lorem dolor 
      ipsum lorem dolor ipsum lorem 
      dolor ipsum lorem dolor</p> 
    </div> 
</div>​ 

CSS

#container { 
    cursor:pointer; 
    font-family:Helvetica,Arial,sans-serif; 
    background:#ccc; 
    margin:30px; 
    padding:10px; 
    width:150px; 
} 
#hover-area { 
    background:#eee; 
    padding-top: 60px; 
    text-align:center; 
    width:150px; height:90px; 
} 
#caption-area { width:150px; height:27px; overflow-y:hidden; } 
#caption-area h1 { font:bold 18px/1.5 Helvetica,Arial,sans-serif; } 

（重要的部分是設置#caption-areaheight和overflow-y:hidden）

jQu ERY

$(function(){ 

var $ca = $('#caption-area'); // cache dynamic section 

var cahOrig = $ca.height(); 
// store full height and return to hidden size 
$ca.css('height','auto'); 
var cahAuto = $ca.height(); 
$ca.css('height',cahOrig+'px'); 

// hover functions 
$('#container').bind('mouseenter', function(e) { 
    $ca.animate({'height':cahAuto+'px'},600); 
}); 
$('#container').bind('mouseleave', function(e) { 
    $ca.animate({'height':cahOrig+'px'},600); 
});​ 

}); 

此外，你應該範圍，如果你是真正實現這種那些變量。

---

編輯：改編以上爲multiple hovers on a page, check it out工作。

它有點複雜，但希望你可以在沒有擴展解釋的情況下弄清楚。

Answer 2

非常好的例子，upvoted。我只是把它放在這裏，因爲它似乎有點評論。

您不妨考慮jQuery.stop（）以防止失控動畫。看看我的意思是快速地在包裝器列上下兩次運行鼠標指針。

您的示例JavaScript的以下修訂版在FireFox 3.6中對我工作正常。確切的頁面佈局將決定在關閉字幕區域時選擇器/動畫表現的積極性。

var cahOrig = $('.caption-area').height(); 

// So the class selector doesn't need to be run over and over 
var jqCaptionAreas = $('.wrapper .caption-area'); 

$('.wrapper').each(function(i,obj){ 
    $(obj).css('z-index',9999-i); 
}); 

$('.wrapper').bind('mouseenter', function(e) { 

    // put the brakes on run-aways and close them back up 
    jqCaptionAreas 
     .stop(true) 
     .animate({'height':cahOrig+'px'},400); 

    var $ca = $(this).find('.caption-area'); 

    $ca.css('height','auto'); 
    var cahAuto = $ca.height(); 
    $ca.css('height',cahOrig+'px'); 

    $ca.animate({'height':cahAuto+'px'},400); 

}); 

$('.wrapper').bind('mouseleave', function(e) { 
    $(this).find('.caption-area').animate({'height':cahOrig+'px'},400); 
});