efecto animate de jquery parpadea

[israbart]

Buenas tardes,

Tengo este código en el cual realizo un efecto para aumentar el tamaño de la imagen con la funcion animate de jquery, pero tiene un detalle en la ultima opcion. Parpadea al realizar el efecto y no se bien porque. Les dejo el codigo.

Código HTML:

<style type="text/css">
body{
	font-family:Arial, Helvetica, sans-serif;
    background-color:#BFDFF4;
}
div.Opcion{
    height:400px; 
    width: 723px;
}
div.barraOpcion{
    width: 722px;
	height: 51px;
    text-align: left;
    padding-bottom: 10px;
}
div.OpcionIni{
    float: left;
    height: 320px;
    background-position: center center; 
    border:5px solid white; 
    margin:0 10px;
}
div.opcionSelec{
    float: left;
    cursor: pointer;
    width: 238px;
	text-transform: capitalize;
	height: 22px;
	padding-top:3px;
	text-align:center;
    border-left:1px solid #A2B4BB; 
    border-right:1px solid #A2B4BB;
    color:#000;
	font-weight: bold;
}
div.frameOpcion{
    height: 340px; 
    width: 723px; 
    overflow: hidden;
    position: relative;
    margin-top: 7px;
}
</style>
<script type="text/javascript" src="lib/jquery_mini.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".opcionSelec").hover(
        function(){
            var id = $(this).attr("id");
            id = id.substr(3,2);
            $(this).animate({"width":"+=100px"},800);
            $("#img"+id).animate({"width":"+=100px"},800);
            for(var i=totalProyecto;i>=0;i--){
                if(secOpc+i != id){
                    $("#nom"+secOpc+i).animate({"width":"-=50px"},800);
                    $("#img"+secOpc+i).animate({"width":"-=50px"},800);
                }
            }
        },
        function(){
            var id = $(this).attr("id");
            id = id.substr(3,2);
            $(this).animate({"width":"-=100px"},800);
            $("#img"+id).animate({"width":"-=100px"},800);
            for(var i=totalProyecto;i>=0;i--){
                if(secOpc+i != id){
                    $("#nom"+secOpc+i).animate({"width":"+=50px"},800);
                    $("#img"+secOpc+i).animate({"width":"+=50px"},800);
                }
            }
        }
    );
})
var totalProyecto = 3;
var secOpc = "m";
</script>
<div id="1O" class="Opcion">
    <div id="barraOpciones" class="barraOpciones">
        <div id='nomm0' style='width: 238px;' class="opcionSelec">Opcion1</div>
        <div id='nomm1' style='width: 238px;' class="opcionSelec">Opcion2</div>
        <div id='nomm2' style='width: 238px;' class="opcionSelec">Opcion3</div>
    </div>
    <div id="frameOpcion" class="frameOpcion" >
        <div style="position: absolute; width:720px; top:0; left:0;">
        	<div id="imgm0" class="OpcionIni" style="width:210px; background-image: url(Opcion1.jpg);"></div>
            <div id="imgm1" class="OpcionIni" style="width:210px; background-image: url(Opcion2.jpg);"></div>
            <div id="imgm2" class="OpcionIni" style="width:210px; background-image: url(Opcion3.jpg);"></div>
        </div>
    </div>
</div> 

Cabe mencionar que el detalle solo lo hace en firefox, en IE, sorpresivamente, esta todo bien.