0

Подскажите, пожалуйста, как в jQuery при наведении на блок - плавно увеличить его высоту на заданное кол-во пикселей, и при отпуске - плавно уменьшить до исходных размеров.

1

3 ответа 3

4
var speed=1000,
    originalHeight=200,
    hoverHeight=500;

$('#ID-нужного-блока').hover(function(){
    $(this).stop().animate({height:hoverHeight},speed);
},function(){
    $(this).stop().animate({height:originalHeight},speed);
})

Пример.

3
  • Спасибо. А если оригинальная высота неизвестна или всегда разная?
    – IOleg
    22 авг 2013 в 0:34
  • 1
    При наведении, до выполнения действий получите параметры высоты. На примере @Crasher : var speed=1000, originalHeight=0, hoverHeight=500; $('#ID-нужного-блока').hover(function(){ originalHeight = $(this).height(); // и т.д. ...
    – Deonis
    22 авг 2013 в 0:41
  • 1
    @Deonis нельзя так, там же stop() анимации...
    – zb'
    22 авг 2013 в 8:21
3

Открываем документацию и читаем:

  1. http://api.jquery.com/hover/
  2. http://api.jquery.com/category/events/event-object/
  3. http://api.jquery.com/animate/

В итоге получаем: http://jsfiddle.net/mWyAg/

1

Недавно сам делал такую штуку. Нужно было ограничить текст по высоте, раскрывать этот текст и скрывать. Вот тут мой пример: http://jsfiddle.net/8UeN3/

Определяем высоту вложенных объектов:

function getTotalHeigh(obj)
{
    var totalHeight = 0;
    obj.children().each(function () {
        totalHeight += $(this).height();
    });
    return totalHeight;
}

При наведении, плавно увеличивать:

    $(this)
    .css({'border-bottom': '1px #223322 dotted'})
    .mouseover(function(){
        var tH = getTotalHeigh($(this));
        $(this).animate({
            'height': tH,
            'borderBottomWidth': '0px'
        }, 1000);
    })

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.