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.

[israbart]

Con la ultima opcion me refiero a la imagen Opcion3.jpg del div imgm2. A lo mejor el error esta en el ciclo que hago para animar las otras opciones, ya que con solo 2 opciones no parpadea.

Si alguien no le entiende o tiene duda porfavor comenten

Saludos

[israbart]

Despues de mucho buscar, resulto ser algo muy pero muy simple. Aun me duele la cabeza del zape interno que me di.

Les cuento, cuando se aumenta el tamaño del div siempre lo hace a la derecha por lo que en la ultima opcion forzaba a que lo hiciera a la izquierda disminuyendo el tamaño de los otros div. Sin embargo habia momentos en los que el tamaño de los 3 div que contienen la imagen eran mas grande que el div contenedor, haciendo que el ultimo div bajara. Cuando las otras opciones disminuian de tamaño volvia a subir, haciendo el efecto de parpadeo.

Como lo solucione? solo quite el width del contenedor para que al cambiar de tamaño los div de la imagen nunca sean mas grande que el div contenedor.

Trate de ser los mas coherente y sencillo posible. Si alguien tiene el mismo problema o si le interesa saber mas no duden en enviar mensaje por este medio.

Les mando un saludo