外部 Div 内的动画

Question

我在 div 中有旧文本。
我希望该文本向左飞出，而新文本从右侧飞入。

问题：
我不希望新文本从浏览器窗口中飞入，
而是在包含的 div 中。

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

仅供参考，我正在使用 Jquery & jquery mobile。 我在这里发现了另一个问题： Jquery-animate question: how to constrain a DIV animation within another DIV? 但只需将外部 div 设置为 position:relative 不会改变任何内容。

每个 cmets，添加更多细节（而不是只是到 jsfiddle 的链接）。

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

​ varfruit = ['苹果'，'香蕉'，'橙子'，'猕猴桃']; 变量数 = 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 example。