javascript - 外側の Div 内のアニメーション

Question

div 内に古いテキストがあります。
そのテキストを左に飛ばし、新しいテキストを右から飛ばします。

問題:新しいテキストをブラウザー ウィンドウ内 からではなく、それを含む div 内
から飛ばしたくありません。

http://jsfiddle.net/cabezud/XuyUb/1/

参考までに、私はJqueryとjquery mobileを使用しています。私はここでこの他の質問を見つけました: Jquery-animate question: how to constraint a DIV animation within another DIV? ただし、外側の div を position:relative に設定するだけでは何も変わりません。

コメントごとに、詳細を追加します（jsfiddleへのリンクではなく）。

<div class="outer">
<p class="inner">click me</p>
</div>

var fruit = ['apples', 'bananas', 'oranges', 'kiwis']; 変数番号 = 0;

$('.outer').click(function(){
    next();
});

var next = function() {
num++;
$('.inner').animate({"right":"500%"},500, function() {
    $('.inner').text(fruit[num]).css({"right":"-500%"});
    $('.inner').animate({"right":"0%"},500);
});
};

Answer 1

overflow:hidden;.outer divに追加

jsFiddle の例。