I'm trying to have a single word in a sentence change every 3 seconds, here's my HTML example:
<span id="tar">this is a blue box</span>
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/','<span>$1</span>'); // 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); });
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.
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.
I'm trying to have a single word in a sentence change every 3 seconds, here's my HTML example:
<span id="tar">this is a blue box</span>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/','<span>$1</span>');
// 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
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.
$(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?
$(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: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. http://css-tricks.com/forums/discussion/9810/jquery-looping/#Item_2
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.