1

我使用 JS API 创建了一个自定义 youtube 播放器。当我从播放器鼠标移出时，我试图淡出播放器控件，当我在播放器上鼠标移出时，我试图淡出播放器控件。

以下是我使用的 jQuery 代码。

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

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

鼠标事件无法正常工作，请问有什么建议吗？

4

1 回答 1

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

Mouseenter 和 mouseout 是hover方法的兄弟，并且对于进入/离开元素事件更可靠，而不是添加一些.stop()来清除动画队列，并且奇妙的fadeTo()方法应该是我们秘诀的樱桃。

于 2013-02-10T06:05:45.317 回答