问题与jquery中的鼠标事件

我已经创建了一个使用JS API的自定义YouTube播放器。我试图淡出玩家控制，当我从玩家mouseout和面对面当我mousein玩家。问题与jquery中的鼠标事件

以下是我用过的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/

的鼠标事件都不能正常工作，有什么建议吗？

来源

2013-02-10 Alok Jain

更常见的是，您应该使用'mouseleave'来代替'mouseout'，以避免事件冒泡引起的复杂情况。如果使用'mouseout'，处理器不仅在鼠标离开主元素时触发，而且在鼠标离开任何子元素时才会输入另一个子元素，这是您很少需要的东西。 – SexyBeast 2013-02-10 06:41:56

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

的MouseEnter和鼠标移开是hover方法的兄弟，并为进入/离开元素时更可靠，比增加了一点.stop()清除动画队列和美妙fadeTo()方法应该是樱桃给我们食谱。

来源

2013-02-10 06:05:45

您必须通过'true'到'stop（）'清除队列。 – Musa 2013-02-10 06:10:30

@Musa，这是不正确的。如果它是关于误解的话，那么比我提到的'队列'意味着'积累'，如果这使得这个术语更清晰一点。 – 2013-02-10 06:10:53

@Musa，如果仔细阅读DOCS，您会看到'当调用.stop（）时，队列中的下一个动画立即开始。“这意味着先前动画的队列被清除，而不会创建动画堆积。如我错了请纠正我：） – 2013-02-10 06:13:57

问题与jquery中的鼠标事件

回答

相关问题