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-area height和overflow-y:hidden)

jQuery

$(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 。

这有点复杂，但希望您无需扩展解释即可弄清楚。