jQuery .hover() 或 .animate() 在 Marquee 插件中导致冒泡动画

Posted 2023-05-08

【中文标题】jQuery .hover() 或 .animate() 在 Marquee 插件中导致冒泡动画

【英文标题】：jQuery .hover() or .animate() causing bubbled animations in Marquee plugin

【发布时间】：2012-07-06 06:59:21

【问题描述】：

我在玩Giva Labs jQuery Marquee plugin。示例jsFiddle here。

示例中有两行切换文本：First line 和 Second row。当您开始连续地将鼠标光标移出浅蓝色框时，文本会变得疯狂：线条开始像随机的、无序的一样相互移动。当你在一个循环中将鼠标移动速度从慢变为快时，这种疯狂最强烈。

我搜索了“jquery animate stop”并找到了.stop() 和.clearQueue() 效果。我尝试将这些附加到选框效果上，如下所示：

$("#marquee").marquee().stop();

还有这个：

$("#marquee").marquee().clearQueue();

还有这样的：

$("#marquee").marquee()
    .hover(function() 
        $(this).clearQueue();
    );

我也尝试了插件的内置methods：

$("#marquee").marquee()
    .hover(function() 
        $(this).marquee("pause");
    )
    .mouseout(function() 
        $(this).marquee("resume");
    );

它们都不起作用。

如何摆脱这个故障？

【问题讨论】：

问题出现在哪个浏览器中？我添加了您发布到 jsfiddle 的最后一段代码，并尝试快速移动鼠标，文本按预期停止/暂停。我正在使用 Chrome。

@Lokase Chrome。还检查了 IE8 和 Firefox - 在两者中都进行了复制。

【参考方案1】：

更新/解决：

代码：jsFiddle

---

解决方案总结：

已添加var timedout 在scroll() 内设置timedout 致电clearTimeout(timedout) 内pause()

---

当您将pauseSpeed 设置得很低（例如 2）时，不会发生该错误，这使我相信由于pause() 和resume() 之间的交互而发生的错误

具体来说，pause()中的这段代码：

if( $marquee.data("marquee.showing") != true )
    // we must dequeue() the animation to ensure that it does indeed stop animation
    $lis.filter("." + options.cssShowing).dequeue().stop();

resume()中的这段代码：

if ($marquee.data("marquee.showing") != true) scroll($lis.filter("." + options.cssShowing), 1);

还有scroll()中的这段代码：

setTimeout(function() 
    // if paused, stop processing (we need to check to see if the pause state has changed)
    if (paused == true) return false;

    // scroll the message down
    $li.animate(
        top: (options.yScroll == "top" ? "+" : "-") + $marquee.innerHeight() + "px"
    , options.showSpeed, options.fxEasingScroll);
    // finish showing this message
    finish($li);
, delay);​

据我所知，问题的发生是因为dequeue().stop() [这很有意义] 是即时的，并且scroll(...) 有一些延迟发生的代码 (pauseSpeed)。

所以会发生以下情况：

动画在pause()中取消 然后resume() 调用scroll() 依次设置超时函数，使其在 2000 毫秒内发生 实际上，每次您将鼠标悬停在上方并移出时，它都会创建一个 最终搞砸了一切……别问我怎么了，我现在很累

要解决这个问题，我建议编辑 jquery.marquee.js 代码并在每次停止动画时实际调用 clearTimeout()。

【讨论】：

其实我想我什至知道这是怎么发生的，但我的大脑现在太炸了，无法解释。提示：每次 pausespeed 大于 showspeed 时都可能重现此错误。我提出的解决方案应该可行。

哈哈，无论如何都会发生，但这一定是因为所有超时的函数都被放入队列中。他们在确保停止动画方面做得很好，但不是超时事件。如果您在他们的代码中搜索 clearTimeout，则没有。

这是更新后的小提琴：jsfiddle.net/YtdAS 现在可以使用了。我刚刚添加了timedout，在scroll()中设置，然后在pause()中调用clearTimeout(timedout)

最优秀的错误修复。 :-D 感谢您跟踪它。干杯！

【参考方案2】：

我已在此处将您的代码更新为 JSFiddle。 http://jsfiddle.net/AkQgH/7/

我无法复制快速移动。您获得快速滚动的原因是当您移出并在特定块内的光标中时，它会生成暂停和播放事件。 你可以使用

setTimeout(
  function() 
  
  , 5000);

暂停事件后延迟你想等待的时间，不会产生奇怪的效果。

更新的网址。删除了 JS 错误，因为您的代码应该是“marquee”而不是“marque”。 -- 还有其他错误是“over”，你需要使用“mouseover”

【讨论】：

谢谢，但这些都不起作用。小提琴与我已经尝试过的解决方案之一非常相似（你绑定到mouseover，我绑定到hover）。 setTimeout 似乎没有修复它。我发现当我将鼠标移动速度从慢变为快时，毛刺最强。