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。

它有点复杂，但希望你能在没有扩展解释的情况下弄明白。

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

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

2 个答案: