停止和播放marqee文字动画

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