老虎机悬停CSS3和jQuery

Question

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

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

我的知识是全新的水平，但这是我到目前为止得到的一些代码。我不知道这是怎么回事。

请帮帮我!谢谢!

jsfiddle.net/Bn7Kq/63/

Answer 1

问题是，即使您将鼠标悬停在事件绑定的元素的后代上，也会触发.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;
});