I have old text inside a div. I want that text to fly out

Question

0

Editorial Team

Asked: June 5, 20262026-06-05T16:37:36+00:00 2026-06-05T16:37:36+00:00

I have old text inside a div. I want that text to fly out

0

I have old text inside a div.
I want that text to fly out to the left, and new text to fly in from the right.

Problem:
I don’t want the new text to fly in from within the browser window,
but rather from within the containing div.

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

FYI I’m using Jquery & jquery mobile.
I found this other question here:
Jquery-animate question: how to constrain a DIV animation within another DIV?
but simply setting the outer div to position:relative changes nothing.

Per comments, adding more detail (rather then just a link to jsfiddle).

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

var fruit = [‘apples’, ‘bananas’, ‘oranges’, ‘kiwis’];
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);
});
};