3

我在玩Giva Labs jQuery Marquee 插件。此处为 jsFiddle示例。

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

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

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

还有这个：

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

也像这样：

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

我还尝试了插件的内置方法：

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

他们都没有工作。

如何摆脱这个故障？

4

2 回答 2

4

更新/解决：

代码：jsFiddle

解决方案总结：

  • 添加var timedout
  • 设置timedout在里面scroll()
  • 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).

所以会发生以下情况：

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

To fix this I would suggest editing jquery.marquee.js code and actually calling clearTimeout() every time you stop the animation.

于 2012-07-15T04:01:02.240 回答
2

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

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

setTimeout(
  function() 
  {
  }, 5000);

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

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

于 2012-07-05T20:19:53.553 回答