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

时间:2012-07-05 19:58:50

标签: jquery jquery-plugins jquery-animate marquee

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

示例中有两行切换文字:First lineSecond row。当你开始连续移动鼠标光标并移出浅蓝色框时,文字变得疯狂:线条开始随机移动,不按顺序移动。当你在循环中将鼠标移动速度从慢速变为快速时,疯狂感最强。

我用google搜索“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");
    });

他们都没有工作。

如何摆脱这个小故障?

2 个答案:

答案 0 :(得分:4)

更新/已解决

代码:jsFiddle


解决方案摘要:

  • 添加了var timedout
  • timedout
  • 中设置scroll()
  • clearTimeout(timedout)
  • 内拨打pause()

当您放置一个非常低pauseSpeed(例如2)时,该错误不会发生,这使我相信由于pause()和{之间的交互而发生的错误{1}}

具体而言,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(...)

所以会发生以下情况:

  1. 动画在pauseSpeed)
  2. 中被取消
  3. 然后pause()调用resume(),它会在2000毫秒内设置超时功能
  4. 实际上每次将鼠标悬停并移出时都会创建一个
  5. 这最终搞砸了所有事情......不要问我怎么样,我现在很累了
  6. 要解决此问题,我建议您每次停止动画时编辑scroll()代码并实际调用jquery.marquee.js

答案 1 :(得分:2)

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

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

setTimeout(
  function() 
  {
  }, 5000);

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

更新了网址。删除JS错误到目前为止你的代码应该是“marquee”而不是“marque”。 - 另外一个错误就是“结束”你需要使用“mouseover”