How to stop an animation loop in jquery

JavaScript
1

I have a problem with the animation on this page “intervista 5”

Practically, when the player is playing, next and prev arrows should be hidden. When the user hovers with the mouse on div.interview_media the function I created[1] shows current slide’s active arrows.

Now, the issue: if I hover div.interview_media from the right or the left side of the div, centrally (i.e. where the next or the prev arrow should be) the animation enters a loop since when the arrow is hidden, the pointer triggers the animation while, appearing the arrow, the pointer is no more on div.interview_media but on one of the arrow (.browse) so arrows are hidden entering, then, a show/hide loop… doh!

Any idea on how to solve the issue?

Thank you all for you help,
Giuseppe

[1] The show hide function:

$(function(){
    $('.interview_media').hover(
        function(){
            console.log('showing arrows');
            $('.hidden').stop(true, true).show(200);
        },
        function(){
            console.log('hiding arrows');
            $('.hidden').stop(true, true).hide(200);
        }
    );
});
2

Ok, it seems that with just using fadeIn/Out functions the loop (most of the times. please, let me know how it works for you) is not triggered.
I will also add hoverIntent to be sure the functions is triggered once the mouse is really hovering the div but I am still curious if there was a “correct” solution to the issue. Any idea?

Thank you all anyway.

Giuseppe

3

Ok, I took the pragmatic way I should had taken yesterday. I just moved next and prev arrows inside .interview_media. Time is precious.