老虎机悬停CSS3＆jQuery

-2

当鼠标悬停在图像上时，我想要一个类似slotmachine的动画。我也希望当你离开该地区时，它恢复到起始状态。当你离开时我设法停止动画，当你悬停时开始动画，但有两个问题。老虎机悬停CSS3＆jQuery

动画由于悬停不断激活而相互重叠。
动画并未在起始位置结束。（我不知道该怎么做。）

我的知识是全新的水平，但这里是我到目前为止在这里和那里的代码片段。我不知道所有这些如何工作。

请帮我一把！谢谢！

jsfiddle.net/Bn7Kq/63/

来源

2013-03-08 user1070034

替换“鼠标悬停”和“鼠标移开”与“的mouseenter”和“鼠标离开”分别从不断激活您的帮助 – 2013-03-08 21:47:09

@kpsuperplane由于停止悬停！这样就解决了第一个问题：http://jsfiddle.net/Hy39F/19/ – user1070034 2013-03-08 22:03:31

的问题是.mouseover()和.mouseout()事件触发甚至当你将鼠标悬停在元素的后代到的事件的约束。所以基本上，当您在鼠标光标下传递marqueeElement项目时，您正在处理多个doScroll循环。

要解决此问题，并且只为实际绑定元素触发一次，请改为使用.mouseenter()和.mouseleave()。

var el = $(".mholder").mouseenter(function(){ 
    isHovering = true; 
    var countScrolls = $('.mholder .marqueeElement').length; 

    for (var i=0; i < countScrolls; i++) { 
     doScroll($('.mholder .marqueeElement:nth-child(' + i + ')')); 
    } 
}).mouseleave(function(){ 
    isHovering = false; 
    i=countScrolls+10; 
});

DEMO

来源

2013-03-08 22:06:13

谢谢！关于如何处理第二个问题的任何想法是在mouseleave上，我希望动画能够继续直到它再次到达起始点？ – user1070034 2013-03-09 04:07:24

老虎机悬停CSS3＆jQuery

回答

相关问题