CODEWITHSUNDEEP
jquery
Alok Jain
Alok Jain

Reputation: 3518

Issue with mouse events in jquery

I have created a custom youtube player using JS API. I am trying to fadeout the player controls when i mouseout from the player and facein when i mousein on the player.

Following is the jQuery code i have used. 

$("#video-container, #ytPlayer").on('mouseover', function(){
    $('#video-controls').fadeIn(500);
}).on('mouseout', function() {
    $('#video-controls').fadeOut(500);
});

Demo URL: http://staging.xhtml-lab.com/tik-o-talk/

The mouse events are not working properly, any suggestions please?

Upvotes: 1

Views: 94

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

$("#video-container, #ytPlayer").on('mouseenter mouseleave', function( e ){
    var fadeOpacity = e.type == 'mouseenter' ? 1 : 0 ;
    $('#video-controls').stop().fadeTo( 500, fadeOpacity  );
});

Mouseenter and mouseout are the brothers of hover method, and more reliable for the enter/leave elements event, than adding a bit of .stop() to clear the animation queues and the fantastic fadeTo() method should be the cherry to our recipe.

Upvotes: 2

Related Questions