jquery hover оставляет шлейф

[Floyd]

Добрый день,
прошу подсказать как избавиться от проблемы.
есть строки, наводя мышку на которые срабатывает
"высплывание" кнопки удаления строки, при убирании мышки - кнопка исчезает.
вот оно: http://sdelaju.ru/hover/

фактически, сам код:

$('.str_block')
	.on( "mouseenter", function() {
		$(this).children(".record_del").animate({ opacity: 1 }, 500);
	})
	.on( "mouseleave", function() {
		$(this).children(".record_del").css({opacity: 0});
	});

при медленном проведении мыши всё ок, если дернешь быстро - остается шлейф непогашенных кнопок.
причем, вешал в mouseleave console.log с номерами строк, должно отрабатывать.
из-за чего такая проблема и как ее можно пофиксить? спасибо.

[depp]

$('.str_block')
	.on( "mouseenter", function() {
		$(this).children(".record_del").show('slow');
	})
	.on( "mouseleave", function() {
		$(this).children(".record_del").hide('fast');
	});

[depp]

проблема в том, что ты ставишь задержку в 500мс.
в итоге когда мышка на элементе, то запускается счетчик, который в течение 500 мс делает свойство opacity = 1. если ты до этого времени мышку с элемента убираешь, то срабатывает opacity = 0, а счетчик еще не завершил свою работу. поэтому когда истекает 500 мс, присваивается opacity = 1

[рони]

$(this).stop().children

останавливайте предыдущую анимацию

[Floyd]

Спасибо за ответы, о стопе я и не вспомнил. решилось вот так:

$('.str_block')
	.on( "mouseenter", function() {
		$(this).children(".record_del").animate({ opacity: 1 }, 500);
	})
	.on( "mouseleave", function() {
		$(this).children(".record_del").stop();
		$(this).children(".record_del").css({opacity: 0});
	});