jquery - 停止并播放字幕文本动画

Question

<div id="mqtext">text text text</div>

css

#mqtext{
   position:absolute;
   bottom:3px;
   overflow:hidden;
   white-space:nowrap;
   cursor:pointer;
} 

js

$('#mqtext').bind('marquee', function() {
  var ob = $(this);
  var tw = ob.width();
  var ww = ob.parent().width();
  ob.css({ right: -tw });
  ob.animate({ right: ww }, 70000, 'linear', function() {
  ob.trigger('marquee');
  });
  }).trigger('marquee');

这是一个简单的字幕文本，它可以工作，但我试图用鼠标悬停来阻止它。

$('#mqtext').hover(function() {
    $(this).stop();
});

这也有效，文本停止，但是当光标离开时它不会再次播放。

有什么建议吗？

Answer 1

实际上，这就是您所需要的：

现场演示

var ob = $('#mqtext'),
    w = ob.width();
ob.css({right:-w});

function marqee(){
    if(ob.position().left+w<0) ob.css({right:-w});
    ob.animate({right:'+=4'}, 60, 'linear', marqee);
}
marqee(); // Start

ob.hover(function( e ) {
    return e.type=='mouseenter' ? $(this).stop() : marqee();
});

Answer 2

如果您的问题是当鼠标离开时您无法让文本再次开始移动，下面的代码将解决这个问题。

最新更新的工作 JSFiddle

我只是继续为您重新编写代码，以便它解决缓慢的问题并且它也更容易阅读：

var ob = $("#mqtext"),
    tw = ob.width(),
    ww = ob.parent().width() + tw;

function slideAnimate() {
    ob.animate({       
        right: '+=' + ww
    }, 7000, 'linear');
    ob.animate({
        right: '-=' + ww
    }, 1, slideAnimate);
}

ob.css({ right: -tw });
$(slideAnimate);

ob.mouseenter(function() {
    ob.stop(true, false);
}).mouseleave(function() {
    slideAnimate();
});