JQuery plugin for pulling text when hovering?

Question

I know that I saw something similar to this on the Internet, but I do not have a good example. I was hoping there might be some kind of plugin with a set of structures that I could create around.

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

Any ideas?

Answer 1

(Note: see the edited example below for a more robust solution)

One point of jQuery is to easily deal with this type of dynamic behavior, 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; }

( - #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);
});​

});

, , .

---

: , .

, , , .

Answer 2

, . , .

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