Timed text swap?

Question

is it possible to swap a paragraph of text with javascript/jQuery? I want a delay timer of about 5 seconds, and then the text 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?

What mark-up are you working with? What have you tried already? What happened, or went wrong? What part(s) are you stuck on? — David Thomas, Jul 05 '11 at 12:24
Anything here http://stackoverflow.com/search?q=jquery+animate+delay — mplungjan, Jul 05 '11 at 12:26
possible duplicate of [Jquery animation repeating code.](http://stackoverflow.com/questions/5311972/jquery-animation-repeating-code) — mplungjan, Jul 05 '11 at 12:36

score 1 · Answer 1 · answered Jul 05 '11 at 12:26

1

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

answered Jul 05 '11 at 12:26

Bill Bonar

1,017
2
10
22

and why not delay and/or animate? – mplungjan Jul 05 '11 at 12:27
Thank you, I will try this code, and yes. I want it to loop, so that code was good. – lukas Jul 05 '11 at 12:28
I guess it doesn't matter but often for something this simple I prefer the setTimeout/setInterval because it reads a little more clear to me. But as far as overhead and/or other benefits I cannot think of any – Bill Bonar Jul 05 '11 at 16:33

egze · Answer 2 · 2011-07-05T14:08:31.950

1

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>

edited Jul 05 '11 at 14:08

answered Jul 05 '11 at 12:33

egze

3,200
23
23

Why not add a callback to make it loop and onload so not click is needed? – mplungjan Jul 05 '11 at 12:38
Yeah, how would you do that exactly? I want it to loop every 5 second without a click. – lukas Jul 05 '11 at 12:41
I can't get this to work with a loop and without the button click, anyone know how to get this going? – lukas Jul 05 '11 at 13:07
There you go http://jsfiddle.net/KepBX/1/ Tweak the timer to whatever you want. Now it's 1 second – egze Jul 05 '11 at 13:49

mplungjan · Accepted Answer · 2011-07-05T14:17:21.707

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()  
});

score 0 · Answer 4 · answered Jul 05 '11 at 12:28

0

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);
}

answered Jul 05 '11 at 12:28

Samuele Mattiuzzo

10,760
5
39
63

1

avoid the eval: `setTimeout(changeText,5000);` – mplungjan Jul 05 '11 at 12:31

score 0 · Answer 5 · answered Jul 05 '11 at 12:30

0

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");
}

answered Jul 05 '11 at 12:30

Steeven

4,057
8
38
68

Timed text swap?

5 Answers5