jQuery Plugin to slideout text on hover?

Question

I know I have seen something similar to this online but I don't have a good example. I was hoping there might be some sort of plug-in with the structure set I could design around.

Looking to accomplish something like this: http://dl.dropbox.com/u/904456/2010-06-04_1520.swf

Any ideas?

Answer 1

(Note: See edited example at bottom for more robust solution)

One point of jQuery is to be able accomplish just this sort of dynamic behavior easily, so I don't think you need a special plugin. 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; }

​(Important part is setting #caption-area height and 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);
});​

});

Also, you should scope those variables if you were implementing this for real.

---

EDIT: Adapted the above to work for multiple hovers on a page, check it out.

It's a bit more intricate, but hopefully you can figure it out without an expanded explanation.

Answer 2

Very nice example, upvoted. I am only putting this here because it seemed like a bit much for a comment.

You may wish to consider jQuery.stop() in order to prevent runaway animations. To see what I mean run your mouse pointer up and down the column of wrappers a couple times at a fast pace.

The following revision of your example JavaScript worked OK for me in FireFox 3.6. The exact page layout will determine how aggressive you have to be about selector/animation performance when closing up the caption-areas.

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