*悬停CSS3&jQuery
问题描述:
当鼠标悬停在图像上时,我想要一个类似slotmachine的动画。我也希望当你离开该地区时,它恢复到起始状态。当你离开时我设法停止动画,当你悬停时开始动画,但有两个问题。*悬停CSS3&jQuery
- 动画由于悬停不断激活而相互重叠。
- 动画并未在起始位置结束。 (我不知道该怎么做。)
我的知识是全新的水平,但这里是我到目前为止在这里和那里的代码片段。我不知道所有这些如何工作。
请帮我一把!谢谢!
jsfiddle.net/Bn7Kq/63/
答
的问题是.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;
});
+0
谢谢!关于如何处理第二个问题的任何想法是在mouseleave上,我希望动画能够继续直到它再次到达起始点? – user1070034 2013-03-09 04:07:24
替换“鼠标悬停”和“鼠标移开”与“的mouseenter”和“鼠标离开”分别从不断激活您的帮助 – 2013-03-08 21:47:09
@kpsuperplane由于停止悬停! 这样就解决了第一个问题:http://jsfiddle.net/Hy39F/19/ – user1070034 2013-03-08 22:03:31