Question

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);
        }
    );
});

Answer 1

Try to place the left and right buttons inside the .interview_media div. This way, jQuery understands that you are not leaving the .interview_media div every time you hover over the right and left buttons.