Timed text swap?

is it possible to swap a paragraph of text with javascript/jQuery? I want a delay timer of about 5 seconds, and then the tex开发者_JS百科t should swap to something else, like a image slide. Would be awesome with a fade or an effect, but whatever works. Can you please point me in the right direction or help me out?

Here is how to loop without setTimeout or setInterval

DEMO HERE

<div id="textMessage"></div>
<div class="textContent" style="display:none">Lorem ipsum dolor sit amet</div>
<div class="textContent" style="display:none">In sit amet diam et arcu aliquam tincidunt. </div>

function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 3000).fadeOut('slow',
     function() {
       return slide()
     }
  );      
}      
$(document).ready(function() {
  // save the texts in an array for re-use
  $(".textContent").each(function() {
    texts[cnt++]=$(this).text();
  });
  slide()  
});

setTimeout(function() {
  $('#target').html('New Text');
}, 5000); // <- 5 seconds

and if you want to take it further

setInterval(function() {
  // do some change that will happen every 5 seconds
}, 5000); // <- 5 seconds

Here you go

You can call the function with setTimeout as well

Edit:

Here is the tweaked demo, without a click and with interval

Edit 2:

Copy pasted the code here in case jsfiddle goes down.

<div class="texts">
  <p class="text text_1">text 1</p>
  <p class="text text_2">text 2</p>  
</div>

<script>
  setInterval(function(){
    var toggle = $(".text").hasClass("toggled");
    $(".text_1").animate({opacity: toggle ? 1 : 0});
    $(".text_2").animate({opacity: toggle ? 0 : 1});
    $(".text").toggleClass("toggled");
  }, 1000);
</script>

<style type="text/css">
.texts {
    position: relative;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
}

.text_1{
    opacity: 1
}

.text_2{
   opacity: 0;
}
</style>

function changeText(){
     document.getElementById('my_div_id').innerHTML = 'text_to_display';
}

you can implement changetext to have an array of strings on which you iterate inside the next function:

function timingex( ){
    setTimeout("changeText()",5000);
}

Put your content, that you want to fade in (we can name it #box), right on top of the <p>. Hide it with display:none;. Then use for example:

function() {
    $("#box").delay(5000).fadeIn("slow");
}