Цикличность анимация?
 

Ребята, возникла затруднительная ситуация для моего мозга..
Задача такая, имеется тег:

CSS:

#blablabla {
		width: 200px;
		height: 35px;
		position: fixed;
		right: -165px;
		bottom: 100px;
		background-color: #ffffff;
	}

HTML:

<div id="blablabla">text-text-text</div>

Нужно при наведении на этот тег мышкой, происходило анимация на 120px влево, и на оборот на 120px в право.

По идеи все работает:

$("#blablabla").bind("mouseenter",function(){
		$(this).animate({"width": "+=120px"}, "slow");
	}).bind("mouseleave",function(){
		$(this).animate({"width": "-=120px"}, "slow");
	});

Но если при выполнении анимации, быстро убрать а затем навести мышку, то анимация выполняется очередью... Сначало сдвинится влево, потом в право, затем опять влево.. вправо..

Вопрос заглючается в том как это избежать.. Как при начале выполнении анимация отключать mouseenter, mouseleave, а затем включать после выполнении анимации.. Или есть другие способы..?

PS: Находил одно решение http://vremenno.net/js/jquery-popup-bubbles/ но так и не смог понять... Там тоже автор решил эту проблему..

Вопрос сам же решил..

var hideDelayTimer = null;
	var flag = 0;
	$("#blablabla").bind("mouseenter",function() {
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		if (flag == 0) {
			flag = 1;
			$(this).animate({"width": "+=120px"}, "slow");
		} else {
			return;
		};
	}).bind("mouseleave",function(){
		if (hideDelayTimer) clearTimeout(hideDelayTimer);
		hideDelayTimer = setTimeout(function() {
		hideDelayTimer = null; 
		if (flag == 1) { 
			$("#blablabla").animate({"width": "-=120px"}, "slow", function() {
				flag = 0;
			 });
		} else {
			return;
		};
		}, 500);
	});