老虎机悬停CSS3和jQuery

我想有一个像slotmachine一样的动画，当你悬停在图像上。我还希望它恢复到启动状态，当你离开该地区。我设法在你离开时停止动画，在你悬停时开始，但有两个问题

动画彼此重叠，因为悬停会不断激活它。 动画不会在起始位置结束。我不知道怎么做。 我的知识是完全的新手水平，但这里是我到目前为止通过这里和那里的代码得到的。我不知道所有这些是如何工作的

请帮帮我！谢谢

jsfiddle.net/Bn7Kq/63/

问题在于，即使将鼠标悬停在事件绑定到的元素的后代上，也会触发and事件。因此，本质上，当MarqueElement项在鼠标光标下传递时，您正在处理多个doScroll循环

要解决此问题，并且对实际绑定的元素只触发一次，请改用and

---

用mouseenter和mouseleave分别替换mouseover和mouseout，以停止悬停activating@kpsuperplane谢谢你的帮助！这就解决了第一个问题：谢谢！关于如何处理第二个问题，即关于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;
});