Неочевидные моменты в jquery-методе animate()

29 Фев
2012

Многие разработчики используют в своих разработках замечательный jquery-метод animate(), он есть ряд особенностей, которые я смог заметить, хочу поделиться ими:

1) Например вы хотите использовать следующее:
$(".drop-menu").hover(
function () {
$(this).find("ul").stop().slideDown(1000);
},
function () {
$(this).find("ul").stop().slideUp(1000);
}
);


Скрипт не будет правильно работать, баг можно увидеть, если убрать мышку с меню и быстро ее навести до окончания анимации, блок может исчезнуть или перестанет меняться в размерах.
Можно легко исправить подобное, заменив stop() на stop(true,true) — это позволит устранить подобный баг, но анимация будет начинаться каждый раз сначала, даже если она не успела перед этим закончиться.

2) Допустим мы хотим анимировать выпадающее меню следующим образом:
$("div#menu-nav > div > ul > li").hover(
function(){
$(this).find("ul").css("display","block").stop().animate({
"height": "auto"
}, 200);
},
function () {
$(this).find("ul").stop().animate({
"height": "0px"
}, 200, function () {$(this).css("display","none")}
);
}
);

Работать не будет, так как не поддерживается «height»: «auto», а только значение в пикселях либо «toggle», но если немного доработать код, то можно добиться подобного функционала.
$("div#menu-nav > div > ul > li").hover(
function(){
$(this).find("ul").css("display","block");
var el = $(this).find("ul"),
autoHeight = el.css('height', 'auto').height();
el.height(0).stop().animate({height: autoHeight}, 200);
},
function () {
$(this).find("ul").stop().animate({
"height": "0px"
}, 200, function () {$(this).css("display","none")}
);
}
);


Да, все просто, но некоторые моменты могут быть не очевидны новичкам и данные примеры наглядно показывают эти тонкости.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх