javascript - Jqueryを使用してマウスをホバーしたときにスライドするタイトルを作成する

Question

h2タグがあり、幅が100pxだけですが、h2タグ内のテキストコンテンツが100pxを超えているので、テキストコンテンツを1行だけで表示したいと思います。brazzers.comのようにしたいと思います。ユーザーが投稿のタイトルにマウスを合わせると、投稿の長いタイトルがスライドしてすべてが表示されます。jqueryを使用して作成する方法はありますか？私の初心者の質問について申し訳ありません

Answer 1

これはCSSとホバー動作でできることのようです

#test {
    width:30px;
    overflow:hidden;
    white-space:nowrap;
}
#test:hover
{
    overflow:visible;
}

http://jsfiddle.net/tYEfs

また、参照リンクのnsfw警告かもしれませんか？

Answer 2

オーバーフローのあるdivを作成します。このdivの中には、相対または絶対に位置が設定されたh2タグがあります（構造と意図された動作によって異なります）。マウスがdivの上にくるとすぐに、http：//api.jquery.com/animate/を使用してcssの「left」プロパティを負の値にアニメーション化します。

PS：仕事中のため、例を確認しませんでした...

Answer 3

この例を試してください：

http://jsfiddle.net/QKstB/2/

これはスクリプトです：

var textWidth = $('h1 nobr').outerWidth(),
    totalWidth = $('h1').outerWidth(),
    diff = totalWidth - textWidth;

$('h1').hover( function() {
    $('h1 nobr').animate({ 'margin-left': diff }, 5000, function() { 
        $(this).css('margin-left', 0)
    });
}, function() { 
    $('h1 nobr').stop(true, true);
});