Help with changing a char color
I want to use a timed function (with setInterval()) in order to change the color off the chars in a word. I use jQuery fadeOut() and fadeIn() effects.
In Firefox this works good, but in IE 6 don´t... the last char didn´t appear !!
Can anyone give me a help ? Functional link : http://destaque-cia.com.br/daimaru/colore.html
The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Daimaru Magazine</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/JavaScript" src="js/jq/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("coloreMagazine()", 7000);
});
function coloreMagazine() {
$(".letrinha").fadeOut(200, function() {
});
coloreLetrinha (0);
}
function coloreLetrinha(i) {
var cor;
switch ($(".letrinha")[i].style.color) {
case 'yellow':
cor = '#363';
break;
case 'red':
cor = 'yellow';
break;
case 'blue':
cor = 'red';
break;
default:
cor = 'blue';
}
$(".letrinha")[i].style.color = cor;
$(".letrinha").eq(i).fadeIn(200, function() {
//~ alert($(".letrinha").eq(i).attr('innerHTML'));
if (i < $(".letrinha").length-1)
coloreLetrinha(i+1);
})
}
</script>
</head>
<body>
<div id="site">
<div id="top">
<div id="logo" style="float:left">
<div style="clear:both; float:left">
<div id="letra1" class="letra">D</div>
<div id="letra2" class="letra">A</div>
<div id="letra3" class="letra">I</div>
<div id="letra4" class="letra">M</div>
<div id="letra5" class="letra">A</div>
<div id="letra6" class="letra">R</div>
<div id="letra7" class="letra">U</div>
</div>
<div style="clear:both; position:absolute; top:55px;">
<div id="letra11" class="letrinha">M </div>
<div id="letra12" class="letrinha">A </div>
<div id="letra13" class="letrinha">G </div>
<div id="letra14" class="letrinha">A </div>
<div id="letra15" class="letrinha">Z </div>
<div id="letra16" class="letrinha">I </div>
<div id="letra17" class="letrinha">N </div>
<div id="letra18" class="letrinha">E </div>
</div>
</div>
<div id="menu"></div>
</div>
<div id="contents">
<div id="left"></div>
<div id="miolo"></div>
</div>
<div id="rodape"></div>
</div>
</body>
</html>
Thank you!