停止和播放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(); 
});