0

I was wondering if any of you knew a script which can have text flash in and out, like how Twitter updates itself when a new tweet comes in or more specifically how Apple's home page has these text flashing next to "Hot News Headlines".

I have my own set text so it's not like I'm updating from twitter or rss.

For example I have "text1" "text2" "text3"

But I want only "text1" to show for about... say 5 seconds, then "text2" comes and replaces it by fading or anything

Matt
  • 2,439
  • 7
  • 29
  • 42

2 Answers2

1

Yes, it's doable with the JavaScript setInterval function.

//Global Scope variables, usable in all functions...
var randomStuff = ["Foo", "Bar", "Even multiple Words"];
var $target;
var loadContentIndex = 0;

$(function() {
    $target = $('#target'); //Set the target div...
    loadContent(); //Initiate it once on page load...
    window.setInterval(loadContent, 2000); //And set it to work every 2000ms (or 2s).
});

function loadContent() {
    $target.fadeOut(function() { //Once fade out is complete...
        $target.text(randomStuff[loadContentIndex]); //Change the text
        $target.fadeIn(); //Fade back in.
    });

    loadContentIndex++; //Increase the array counter.
    if (randomStuff.length == loadContentIndex) { //If reached the end of the array...
        loadContentIndex = 0; //Reset the counter :)
    }
}

Note: I'm using the jQuery library to handle the animations, just because it's so much easier.

Example Here

Community
  • 1
  • 1
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

You can make your life easier by using a library such as jQuery.

To fade out a element, here's a demo: http://jsfiddle.net/dFQCR/1/

  $('#update').show().fadeOut(1000, function() {
    // Animation complete.
  });

More effects here: http://api.jquery.com/category/effects/

Mrchief
  • 75,126
  • 20
  • 142
  • 189