jQuery水平滾動鼠標上的文本停止在內容結尾

Question

我想使用這個小提琴http://jsfiddle.net/KpuyT/3/但是，我不希望div無限滾動 - 而是我希望滾動文本儘快停止到達其結尾，然後通過鼠標移出將其重置回原始位置。我試過以下內容：

$(function(){ 
    var scroll_text, 
     do_scroll = false; 

    $('div.container').hover(
     function() { 
      var $elmt = $(this); 
      if ($elmt.find('div.title-holder a').width() > 130) { 
       scroll_text = setInterval(function(){scrollText($elmt);}, 30); 
       do_scroll = true; 
      } 
     }, 
     function() { 
      if (do_scroll) { 
       clearInterval(scroll_text); 
       $(this).find('div.title-holder a').css({ 
        left: 0 
       }); 
      } 
     }, 
     function(){ 
      $('div.container').scroll(function() { 
       if ($('div.container').scrollLeft() == ($('div.title-holder a').width() - $('div.container').width())) { 
        do_scroll = false; 
       } 
      }); 
     } 
    ); 

    var scrollText = function($elmt){ 
     var left = $elmt.find('div.title-holder a').position().left - 1; 
     left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left; 
     $elmt.find('div.title-holder a').css({ 
      left: left 
     }); 
    }; 
}); 

但它不起作用。我怎樣才能解決這個問題？

Answer 1

這可以解決的基礎上，撥弄貼：

//move 

$('div.container').hover(function(){ 
var $elmt = $(this); 
$elmt.find('div.title-holder a').animate({ 
    left: '-'+ ($elmt.find('div.title-holder a').width() - $('.container').width()) 
    }, 5000);  
}); 

//and return to 0 

$('div.container').mouseleave(function(){ 
var $elmt = $(this); 
$elmt.find('div.title-holder a').animate({ 
    left: 0 
    }, 5000);  
}); 

FIDDLE