在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.

我用JS API创建了一个youtube用户。当我从播放器上滑出鼠标时，我正试图将玩家控制在播放器上。

Following is the jQuery code i have used.

下面是我使用的jQuery代码。

$("#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/

演示网址:http://staging.xhtml-lab.com/tik-o-talk/

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

鼠标事件不能正常工作，请问有什么建议吗?

1 个解决方案

#1

$("#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.

Mouseenter和mouseout是hover方法的兄弟，对于输入/离开元素事件，要比添加一点.stop()来清除动画队列和神奇的fadeTo()方法更可靠。