alternating text with jQuery

[schotty]

Hi guys,

I’m trying to have a single word in a sentence change every 3 seconds, here’s my HTML example:

this is a blue box

In the sentence I want the word blue to change to red for example, then green. The jQuery code I have for this (which isn’t working, I’m hoping one of you can tell me why):

$(document).ready(function(){
// wrap tar word in a span
var output = $( "#tar" ).text().replace('/b(blue)b/','$1');
// set html of tar span equal to output
$( "#tar" ).html(output);
// after 2 seconds, fade out new span, change text, and fade it in.
$( "#tar > span" ).delay(2000).fadeOut(1000,function(){
$(this).text('red');
}).fadeIn(1000).delay(2000).fadeOut(1000,function(){
$(this).text('green');
}).fadeIn(1000);
});

and if you want to see my test page, its available here: http://tomschott.com/test/test.html

Thanks in advance

[cybershot]

your page cannot be found. Test the javascript is being called correctly by doing

alert(“working”);

if you see the alert then you know that it working that far at least.

as far as the text color. I wouldn’t do it that way, I would use addClass and removeClass to do it or look up adding css in jquery.

[schotty]

sorry, updated the test page link.

[schotty]

I have changed my code completely, and started from scratch

$(document).ready(function(){
$('span').text('blue');
$( 'span' ).delay(2000).fadeOut(1000,function(){
$(this).text('red');
}).fadeIn(1000).delay(2000).fadeOut(1000,function(){
$(this).text('green');
}).fadeIn(1000);
});


This works fine, now how would I repeat this code infinately?

[jfreehill]

Wrap what you have between $(document).ready(function(){ and the closing }); in a function, such as colorChange or whatever you want, and then set an interval timer below it to call the function, like this:

var colorLooper = setInterval(function() {

colorChange();

}, 6000);

Well that or you could just put the code inside of setInterval as an anonymous function (just replace where it says colorChange();), but personally I wouldn’t do that.

As you can guess by the syntax, the second parameter would be the total time it takes your function to happen in milliseconds, so put that there. You could use one variable for the delays and one for fades so you can set a total variable to the sum of those (after multiplying use) and pass that to setInterval if you ever think you’ll change those values or if you want them to be dynamic.

Refer to one of my previous posts to see this working except in a finite loop. https://css-tricks.com/forums/discussion/9810/jquery-looping/#Item_2

[schotty]

Thanks for the help, although this is my first time using jQuery, and I’ve managed to get this far, unfortunately I don’t know how to wrap this in a function, how is that achieved? it’s possibly a really simple thing, but I really have no idea, sorry.

[cybershot]

it’s easy

function colorChange() {
$('span').text('blue');
$( 'span' ).delay(2000).fadeOut(1000,function(){
$(this).text('red');
}).fadeIn(1000).delay(2000).fadeOut(1000,function(){
$(this).text('green');
}).fadeIn(1000);
}


then you call it the way jfreehill shows


$(document).ready(function(){

var colorLooper = setInterval(function() {
colorChange();
}, 6000);
});


untested. play with it to get it working. Look up functions in jquery.

[schotty]

thank you very much, I’ll have a play with this.

[Author]

Posts