Подскажите, пожалуйста, как в jQuery
при наведении на блок - плавно увеличить его высоту на заданное кол-во пикселей, и при отпуске - плавно уменьшить до исходных размеров.
-
Используйте методы [.hover()][1] или [.mouseenter()][2]/[.mouseleave()][3] и [.animate()][4] [1]:api.jquery.com/hover [2]:api.jquery.com/mouseenter [3]:api.jquery.com/mouseleave [4]:api.jquery.com/animate– DeonisCommented 22 авг. 2013 в 0:27
Добавить комментарий
|
3 ответа
var speed=1000,
originalHeight=200,
hoverHeight=500;
$('#ID-нужного-блока').hover(function(){
$(this).stop().animate({height:hoverHeight},speed);
},function(){
$(this).stop().animate({height:originalHeight},speed);
})
-
Спасибо. А если оригинальная высота неизвестна или всегда разная?– IOlegCommented 22 авг. 2013 в 0:34
-
1При наведении, до выполнения действий получите параметры высоты. На примере @Crasher : var speed=1000, originalHeight=0, hoverHeight=500; $('#ID-нужного-блока').hover(function(){ originalHeight = $(this).height(); // и т.д. ...– DeonisCommented 22 авг. 2013 в 0:41
-
1
Открываем документацию и читаем:
- http://api.jquery.com/hover/
- http://api.jquery.com/category/events/event-object/
- http://api.jquery.com/animate/
В итоге получаем: http://jsfiddle.net/mWyAg/
Недавно сам делал такую штуку. Нужно было ограничить текст по высоте, раскрывать этот текст и скрывать. Вот тут мой пример: 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);
})