Анимация участка на js с opacity, фиксы ошибок

[walker1232]

Вопрос, когда я вожу по этому блоку, моргает этот самый блок(на изображении видно когда он не горит и когда горит - при наведении), видно включается и выключается когда перевожу с 1 элемента в этом блоке на другой, помогите исправить это..
нужно чтобы навел на этот блок и поводил по нему, и он не моргал :-?

$(function(){
$('a.flex').on('mouseover mouseout', function(e) {
$('.inner, span.after', this).stop(true, true).animate({opacity: 0.88 * (e.type == 'mouseover')}, 200);
});
});

<div class="hex grid-4 invert secondary" style="opacity: 1;">
<a href="/project/tedxbrighton" style="background-image: url(/uploads/work/300/2056121501.png);" title="TedxBrighton" class="flex">
<div class="inner" style="opacity: 0.88;">
<i class="ss-icon ss-standard huge">������</i>
<h3 class="flex">TedxBrighton</h3>
</div>

<div class="hex-1"><span class="after" style="opacity: 0.88;"></span></div>
<div class="hex-2"><span class="after" style="opacity: 0.88;"></span></div>
<span class="after" style="opacity: 0.88;"></span>
</a>
</div>

[рони]

walker1232,
mouseenter mouseleave