外部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的位置：相对不会改变任何东西。

每个评论，增加更多的细节（而不是只是一个链接到jsfiddle）。

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

变种水果= [ '苹果'， '香蕉'， '桔子'， '猕猴桃']; var num = 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。