Переход между input, отловить
 

Здравствуйте.

Появилась следующая задача, когда делал сайт, имеется <div id="mlogin_form"></div>, внутри которого есть 2 input'a, так вот, при фокусе этих инпутов необходимо создавать под формой и анимировать по высоте блок (будто он выплывает), при блюре, соответственно наоборот, заплывает назад. Все просто, если бы не одна тонкость, при переходе между этими инпутами также возникают события фокус и блюр, но при этом наш новый блок должен стоять на месте (надеюсь понятно объяснил).

Я даже решил эту задачу, но решил в лоб, делает вид, что работает, но меня очень беспокоит этот быдло-код с таймерами:

$('#mlogin_form input').focus(function() {
			$('body').append('<div id="login_more"></div>');
			$('#login_more').offset({left: $('#mlogin_form').position().left});
			if (!loginTime) {	
				$('#login_more').css({height: "0px"});
				$('#login_more').animate({height: "35px"}, 200);
			}
			loginTime = false;
});
$('#mlogin_form input').blur(function() {
			loginTime = true;
			$('#login_more').remove();
			setTimeout(function() {
				if (loginTime) {
					$('body').append('<div id="login_more"></div>');
					$('#login_more').offset({left: $('#mlogin_form').position().left});
					$('#login_more').animate({height: "0px"}, 200, function() {
						$('#login_more').remove();
					});
				}
				loginTime = false;
			}, 1);
});

Подскажите, может есть более изящное решение в данной ситуации, а то меня, честно, пугает такой код :)

Ах, да, булева переменная loginTime - глобальная для этих функций и по-умолчанию false.

Спасибо!

используйте событие onmousedown на input-ах
Оно возникает раньше чем blur на другом инпуте можно без таймаута обойтись

Спасибо :) Прикольно знать такие тонкости.
Рабочее решение, мало ли кому-то надо:

$('#mlogin_form input').focus(function(e) {
			$('body').append('<div id="login_more"></div>');
			$('#login_more').offset({left: $('#mlogin_form').position().left});
			if (!logMenuTime) {
				$('#login_more').css({height: "0px"});
				$('#login_more').animate({height: "35px"}, 200);
			}
			logMenuTime = true;
});
		
$('#mlogin_form input').mousedown(function(e) {
			logMenuTime = false;
});
		
$('#mlogin_form input').blur(function(e) {
			logMenuTime = !logMenuTime;
			if (logMenuTime) {
				$('#login_more').remove();
			}
			else {
				$('#login_more').animate({height: "0px"}, 200, function() {
					$('#login_more').remove();
				});
			}
});