Duda sobre jQuery, uso de if...

Buenas.
Soy nuevo en el foro, pero hace un tiempo que vengo leyendo los muy buenos tutoriales que tienen =)
Mis felicitaciones por el exelente sitio que crearon.

Hace unos dias me puse a leer y probar algunas cosas sobre jQuery, que es lo primero que uso de java.

Lo que hice es esto: http://www.jinik.com.ar/jquery/cubos.html

y me idea era que a los rectangulos cuando estan abajo tengan una efecto de mouse over/out, en el que suban un poquito al pasar el mouse por arriba con algo de codigo como este.

Código :

   $(document).ready(function (){
      //Aqui asignamos el click al elemento <a>
      $("#rojo").click(function (){
         $("#azul").animate({top:350,left:500},"slow");
         $("#verde").animate({top:350,left:600},"slow");
         $("#amarillo").animate({top:350,left:550},"slow");
         $("#rojo").animate({top:30,left:525},"slow");
      });
      
      
      $("#rojo").mouseover(function (){
         $("#rojo").animate({top:340,left:450},"fast");
                              });
      $("#rojo").mouseout(function (){
         $("#rojo").animate({top:350,left:450},"fast");
                             });
      
   
            
      $("#azul").click(function (){
         $("#azul").animate({top:30,left:525},"slow");
         $("#verde").animate({top:350,left:600},"slow");
         $("#amarillo").animate({top:350,left:550},"slow");
         $("#rojo").animate({top:350,left:450},"slow");
      });
      
         
      $("#amarillo").click(function (){
           $("#azul").animate({top:350,left:500},"slow");
         $("#verde").animate({top:350,left:600},"slow");
         $("#amarillo").animate({top:30,left:525},"slow");
         $("#rojo").animate({top:350,left:450},"slow");
      });
      
         
      $("#verde").click(function (){
         $("#azul").animate({top:350,left:500},"slow");
         $("#verde").animate({top:30,left:525},"slow");
         $("#amarillo").animate({top:350,left:550},"slow");
         $("#rojo").animate({top:350,left:450},"slow");
      });

El problema que tengo es que al hacer click sobre el rectangulo rojo en ese caso, vuelve abajo por el "mouseout". Habia pensado ponerle un if al efecto de rollover, pero no pude terminar de hacer que funcione. la forma en que lo escribi fue esta:

Código :

          if( ("#rojo").top="350" ) {
                $("#rojo").mouseover(function (){
         $("#rojo").animate({top:340,left:450},"fast");
                              });
      $("#rojo").mouseout(function (){
         $("#rojo").animate({top:350,left:450},"fast");
                             });
                                          });

Tambien probe con varias formas de escribir la condicion, pero no se cual es la correcta, si por favor puede ayudarme se lo agradeceria muchisimo =)

Desde ya gracias por el espacio que tienen, y felicitaciones denuevo.
No duden que me voy a pasar seguido.
Saludos!

te falto el else:

Código Javascript :

if( ("#rojo").top="350" ) {
   $("#rojo").mouseover(function (){
         $("#rojo").animate({top:340,left:450},"fast");
   });
   }else{
   $("#rojo").mouseout(function (){
      $("#rojo").animate({top:350,left:450},"fast");
   });
});

prueba con esto y nos avisas

Código Javascript :

if( ("#rojo").top="350" ) {
   $("#rojo").hover(
      function () {
         $("#rojo").animate({top:340,left:450},"fast");
      },
      function () {
         $("#rojo").animate({top:350,left:450},"fast");
      }
   );
});

Buenas..
Gracias por las respuestas, pero te digo que al momento de ponerlo en dreamweaber los dos me tiran error.
Igualmente el primero no cumple lo que yo quiero que haga..
El segundo puede ser que funsione, pero no lo hace.

la forma que consegui de que no me de error es:

Código :

if( ("#rojo").top="350" ) { 
   $("#rojo").hover( 
      function () { 
         $("#rojo").animate({top:340,left:450},"fast"); 
      }, 
      function () { 
         $("#rojo").animate({top:350,left:450},"fast"); 
     });
};

sin el parentesis en el ultimo cierre, pero igualmente no funsiona.

igualmente mi duda mayor es si me estoy escribiendo bien en la condicion...

otra duda que tengo es, se puede modificar el z-index desde una funsion de animate con jQuery??
porque intente hacerlo, pero no me lo reconoce..

tienes razon no lo probe y puse un parentesis de mas:
asi deberia funcionar:

Código Javascript :

if( ("div").top="350" ) { 
   $("div").hover( 
      function () { 
      var left = $(this).css("left");
        $(this).animate({top:340,left:left},"fast"); 
      }, 
      function () { 
      var left = $(this).css("left");
         $(this).animate({top:350,left:left},"fast"); 
      }
   );  
  };

ponle alguna clase a los cuadros y luego pones esa clase en vez del div.

y cambiando el z-index:

Código Javascript :

if( ("div").top="350" ) { 
   $("div").hover( 
      function () { 
         var index = parseFloat($(this).css("z-index"))+100;   
         var left = $(this).css("left");
         $(this).css("z-index",index);
         $(this).animate({top:340,left:left},"fast"); 
      }, 
      function () { 
         var index = $(this).css("z-index")-100;   
         var left = $(this).css("left");
         $(this).animate({top:350,left:left},"fast"); 
         $(this).css("z-index",index);
      }
   );  
};

el parseFloat es para convertir una cadena en entero, asi puedes sumarle 100 de index y luego se le resta 100 para que regrese a como estaba.
espero te sirva.

saludos

Gracias chug0 por responder =)
Probe el anteultimo script que me pasaste, poniendole classes a los divs y llamandolos por la class antecedido del "." . El resultado sigue siendo parecido , no hace lo que quiero que haga, sino que mientras estan los 4 abajo anda bien, pero cuando clickeo en alguno, sube y vuelve a bajar por el hover en este caso.
Lo del z-index no lo queria utilizar en esta parte, pero igualmente gracias, voy a probarlo de la manera en que lo escribiste..
Muchas gracias nueva mente por todas tus respuestas =)

PD: Ya probe lo del z-index y funsiona muy bien, gracias por esa parte =)

si, eso es por culpa del hover.
poniendole una clase tal vez:

Código Javascript :

   $(document).ready(function (){
      $("div").click(function (){
         $(this).animate({top:30},"slow"); 
         $(this).addClass("plin"); 
         $("div").not(this).animate({top:350},"slow");
      });      
      if( ("div").top="350" ) { 
         $("div").hover( 
            function () { 
               //var index = parseFloat($(this).css("z-index"))+100;   
               var left = $(this).css("left");
               //$(this).css("z-index",index);
               $(this).not(".plin").animate({top:340,left:left},"fast"); 
            }, 
            function () { 
               //var index = $(this).css("z-index")-100;   
               var left = $(this).css("left");
               $(this).not(".plin").animate({top:350,left:left},"fast"); 
               //$(this).css("z-index",index);
            }
         );  
      };
   });

avisanos como te fue

Buenas denuevo.
Probe este ultimo que me pasaste y ya de este modo se arregla el problema de que bajen al hacerles click.}
lo unico que pude ver por ahora, que una vez que suben, y vuelven a bajar al seleccionar algun otro, ya no tienen el efecto de hover, pero todabia no tube tiempo como para mirarlo un poco..
Mas tarde veo que puedo hacerle..
Nuevamente muchisimas gracias por tu voluntad de ayudarme =)
no se encuentra en cualquier lado gente asi..
saludos =)

me olvide que el if esta sobrando y solo hay que quitar la clase plin para que se arregle, recuerda cambiar los div por sus respectivas clases no es bueno seleccionar todos los divs, solo lo pongo asi para el ejemplo

Código Javascript :

$(document).ready(function (){
      $("div").click(function (){
         $(this).animate({top:30},"slow"); 
         $("div").removeClass("plin");//quitamos la clase plin
         $(this).addClass("plin"); 
         $("div").not(this).animate({top:350},"slow");
      });      
      $("div").hover( 
         function () { 
            var left = $(this).css("left");
            $(this).not(".plin").animate({top:340,left:left},"fast"); 
         }, 
         function () { 
            var left = $(this).css("left");
            $(this).not(".plin").animate({top:350,left:left},"fast"); 
         }
      );  
   });

saludos

sisi, muchisimas gracias, cuando vuelvo de la facu lo miro =)

PD: ya lo probe y anda perfecto =)
muchisimas gracias chug0 por haberme ayudado
lo aprecio muchisimo!!
la verdad que vale mucho la pena seguir por esta zona..
ya tienen un nuevo user (;
saludos