オーバーフローしたテキストを表示にスクロール

Question

オーバーフローしたテキストを表示するためにスクロールする必要があります。

私はそのテキストインデントをアニメーション化しようとしましたが、正しいピクセル量をアニメーション化する必要があります。それをどのように計算するのですか？

参照：http://jsfiddle.net/wqRcK/5/

私が試したように私は、「全幅」、唯一のビューにテキストをスクロールする必要はありません。

span.titleは10ピクセルのパディングをどのように尊重しますか？あなたinline-blockからspan、
と"-" + ($(this).width() - $(this).parent().width()) + "px"にそれをアニメーション化

Answer 1

セット：

div.box span.title { white-space: nowrap; display: inline-block; } 

$(document).ready(function() { 
    var boxwidth = $("div.box").width(); 
    $("span.title").hover(
     function() { 
     $(this).stop().animate({ 
      textIndent: "-" + ($(this).width() - $(this).parent().width()) + "px" 
     }, 1000); 
     }, 
     function() { 
     $(this).stop().animate({ 
      textIndent: "0"   
     }, 1000); 
     } 
    ); 
}); 

ここでは、あなたのフィドルである：http://jsfiddle.net/wqRcK/20/

---

P.S.セレクタを常にキャッシュすることを忘れないでください。ジョセフの答えを完了するために、

Answer 2

、私はあなたの側の質問のためのパディングがタイトル対称型=>http://jsfiddle.net/wqRcK/45/

Aymericにを作る追加。