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

});

Кроме того, вы должны использовать эти переменные, если вы реализуете их по-настоящему.

<ч />

РЕДАКТИРОВАТЬ: Адаптировано выше, чтобы работать для несколько пар на странице, проверьте

Это немного сложнее, но, надеюсь, вы сможете понять это без подробного объяснения.

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