jquery - 老虎机悬停 CSS3 & jQuery

Question

当您将鼠标悬停在图像上时，我想要一个类似老虎机的动画。当您离开该区域时，我还希望它恢复到起始状态。我设法在您离开时停止动画，并在您悬停时开始动画，但有两个问题。

1. 动画相互重叠，因为悬停不断激活它。
2. 动画不会在起始位置结束。（我不知道该怎么做。）

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

请帮帮我！谢谢！

jsfiddle.net/Bn7Kq/63/

Answer 1

问题是，即使您将鼠标悬停在事件绑定到的元素的后代上，.mouseover()and事件也会触发。.mouseout()所以本质上，当项目在鼠标光标下通过时，您正在处理多个doScroll循环。marqueeElement

要解决此问题，并且只为实际绑定元素触发一次，请使用.mouseenter()and.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;
});

演示