Question

How can I slide text out and in to replace one word in a sentence?

Here’s the sentence:

<p>Lorem <span>ipsum</span> dolor sit.</p>

I need to slide the word inside the <span> up and slide a new word in from the bottom.

The goal is to have an array of words that rotate in every n seconds. For example, given the following array:

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

How can I replace (via .slideUp(), I expect) the existing word with the next in the array?

I’m expecting the end result to somewhat resemble how an odometer might acts, but with text. Make sense?

Can you point me in the right direction?

Answer 1

I think you might try

var myArr = new Array('ipsum','alpha','beta','gamma','delta','epsilon');

myArr.push(myArr.shift());

• myArr.shift() gives you “ipsum”
• myArr.push() puts it in the end.

Edit :

Ok Ryan, here is a solution, you could use a better animation, but this is for the sake of the example.
And I was wrong first with the pop(), since that’s shift() you need here ! (edited as well)

use this in the html :

        <span id="mySpan">plop</span>

use this for javascript with jquery :

var myArr = new Array('ipsum ','alpha ','beta ','gamma ','delta ','epsilon ');
    loop();

    function loop() 
    {
        $("#mySpan").slideUp(3000, function(){
            myArr.push(myArr.shift());

            $("#mySpan").empty();
            $("#mySpan").append(myArr[0]);
            $("#mySpan").show(200);

            loop();
        });
    }   

JSFiddle: http://jsfiddle.net/eL3eG/