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

实际上这就是你所需要的：

<强> LIVE DEMO

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

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

NEWEST UPDATED Working 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();
});

停止并播放字幕文本动画

2 个答案: