Try to set the same time for showing and hiding images. For example:
selectors.$lis.each(function (i) {
$(this).on('mouseenter',function () {
selectors.$imgs[i].animate({ opacity: 1 }, 500);
}).on('mouseleave', function () {
$cont_imgs.each(function () {
$(this).stop(true, true);
});
selectors.$imgs[i].animate({ opacity: 0 }, 500);
});
});
It seems to be working. Try on your own on JSFiddle.