jQuery插件在悬停时滑出文本？

Question

我知道我在网上看过类似的东西,但我没有一个很好的例子.我希望可能会有一些我可以设计的结构集插件.

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

有任何想法吗？

Answer 1

(注意:请参阅底部的编辑示例以获得更强大的解决方案)

jQuery的一个要点是能够轻松地完成这种动态行为,所以我认为你不需要一个特殊的插件. 单击此处查看以下代码

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);
});?

});

此外,如果您要实现这些变量,则应该对这些变量进行调整.

编辑:改编上述内容以适应页面上的多个悬停,检查出来.

它有点复杂,但希望你能解决它没有扩展的解释.