Carrossel com Jquery

Olá pessoal, estou com o seguinte problema, fiz uma carrossel usando Jquery, só que o mesmo não funciona no IE 8, com o IE 6 eu nem vou me preocupar, senão funcionar não importa, mas com o IE 8 eu sou obrigado a fazer funcionar. Abaixo segue o codigo javascript e o CSS...

Arquivo Java

var i=0;
$(document).ready(function(){
	var tamCarrosel = ($("#carroselEfeito li").length-1);
	// Transparência PNG para I.E.
	$('#carrosel_proximo').click(function() {
 if(i == 0)
 $('#seta_esquerda a').css({'backgroundPosition':'0 0'});
 if(i < tamCarrosel){
 $('#carroselEfeito li').eq(i).animate({ left : "-"+500}, function() {
 $('#carroselEfeito li').eq(i+1).css({ left: "500px"});
 $('#carroselEfeito li').eq(i).hide();
 $('#carroselEfeito li').eq(i+1).animate({left: "-"+0});
 i++;
 if(i == tamCarrosel)
 $('#seta_direita a').css({'backgroundPosition':'0 75px'});
 });
 }
	});
	$('#carrosel_anterior').click(function(){
 if(i == tamCarrosel)
 $('#seta_direita a').css({'backgroundPosition':'0 0'});
 if(0 < tamCarrosel && i>0){
 $('#carroselEfeito li').eq(i).animate({left : "+"+500}, function(){
 $('#carroselEfeito li').eq(i-1).css({right: "500px"});
 $('#carroselEfeito li').eq(i).hide();
 $('#carroselEfeito li').eq(i-1).animate({left: "-"+0});
 i--;
 if(i == 0)
 $('#seta_esquerda a').css({'backgroundPosition':'0 75px'});
 });
 }
	});
});

ah aqui o arquivo CSS:

.centro {
	width: 700px;
	margin: 0px auto;
	text-align: left;
	position: relative;
}
#seta_esquerda {
	float: left;
	margin: 60px 20px 0px 0px;
}

#seta_esquerda a, .se {

	display: block;
	width: 56px;
	height: 72px;
	background: transparent url('../img/seta_esquerda.png') 0 0;
}

#seta_esquerda a:hover, .seH {

	background-position: 0px 149px;
}

#seta_direita {
	float: right;
	margin: 60px 20px 0px 0px;
}

#seta_direita a, .sd {

	display: block;
	width: 60px;
	height: 72px;
	background: transparent url('../img/seta_direita.png') 0 0;
}

#seta_direita a:hover, .sdH {

	background-position: 0px 149px;
}

#conteudo_carrosel {
	width: 500px;
	height: 163px;
	overflow: hidden;
	float: left;
	margin: 5px 0px 5px 20px;
	position: relative;
}

.descCliente {
	width: 30%;
	height: 100%;
	float: left;
}

#conteudo_carrosel ul {

	width: auto;
	padding: 0px;
	margin: 0px;
}

#conteudo_carrosel ul li {

	position: relative;
	height: 163px;
	display: block;
	list-style: none;
}

#conteudo_carrosel ul li .screenShot {

	width: 65%;
	height: 100%;
	float: left;
	padding:5px;
	margin-right: 10px;
}

#conteudo_carrosel ul li .titulo {

	text-align:center;
	width: 70%;
	font-size: 22px;
	color: #DE4E16;
	display: block;
	padding: 5px;
	margin: 0px 0px 8px 0px;
}

#conteudo_carrosel ul li .descricao {

	height: 91px;
	text-align:center;
	padding:5px;
	font-size: 12px;
	color: #e7dcdc;
	display: block;
}

#conteudo_carrosel ul li .link {

	display: block;
}

#conteudo_carrosel ul li .link a {

	color: #4c63b0;
	text-decoration: none;
}

#conteudo_carrosel ul li .link a:hover {

	text-decoration: underline;
}

Estou usando a versão 1.3.2 do Jquery... Tem mais uma arquivo de JS para a transparência no IE, mas isso ja tirei e não mudou em nada...

Se alguém poder me ajudar...

VALEU! VALEU MESMO!