Issue with mouse events in jquery -

Issue with mouse events in jquery -

i have created custom youtube player using js api. trying fadeout player controls when mouseout player , facein when mousein on player.

following jquery code 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 not working properly, suggestions please?

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

mouseenter , mouseout brothers of hover method, , more reliable enter/leave elements event, adding bit of .stop() clear animation queues , fantastic fadeto() method should cherry our recipe.

jquery