Why does the position of my buttons mess up when i use animate on hover?

Why does the position of my buttons mess up when i use animate on hover?

I am creating a hover effect where in when I hover over a div, 

there is an Overlay(Show)
and i display a hidden "SHOP NOW" along with an "Arrow" whilst animating their position.

When we hover normally, everything appears fine but on performing haphazard hover over the div, the position of my Call to Action elements get messed up.
I am attaching a JSfiddle of the same.
I have tried adding .stop() but it does not seem to be helping.


Please help me how to fix this.

Should I use HoverIntent to allow hover only on stable Hover?


Or Is there a problem with my jQuery.

The script goes like this[not getting updated on jsFiddle:///],



<script>
(function($){
$(document).ready(function() {
$('.mainImgContLong').hover(function(){
$(this).find('.fadeTextBG').fadeIn('fast');
$(this).find('.Overlay').show();
   $(this).find('.fadeText').fadeIn('fast');
$(this).find('.textAnimate').stop().animate({left:"-=12px"},'slow');
$(this).find('.arrowAnimate').stop().animate({opacity:1,left:"+=8px"}, 'slow');
},
function(){
$(this).find('.fadeTextBG').fadeOut('slow');
$(this).find('.Overlay').hide();
$(this).find('.fadeText').fadeOut('slow');
$(this).find('.textAnimate').stop().animate({left:"+=12px"},'fast');
$(this).find('.arrowAnimate').stop().animate({opacity:0, left:"-=8px"}, 'fast');
}
);
});
})(jQuery);

</script>