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

Вопрос, когда я вожу по этому блоку, моргает этот самый блок(на изображении видно когда он не горит и когда горит - при наведении), видно включается и выключается когда перевожу с 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