JQUERY fadein fade out

[MadDunDee]

Muy buenas, no tengo muchas nocione de js y estoy comenzando a usar jquery. Estoy tratando de hacer un efecto q paso a explicaros a continuación.

Veréis, por un lado uso un panel en slide cuando .click que baja mostrando el contenido. otro botón cierra el panel. Hasta aquí bien, lo q sucede es que el panel tiene un contenido que justo antes de desplegarse el panel se ve, rompiendo así el efecto de aparecer junto con el panel en slide.

Para solucionar esto me planteé hacer que la lsita que tengo dentro de ese slide que contiene unas miniaturas de 200x200 entrara en un fadein cuando clicas para hacer slideDown ycuando clicas para hacer slideUp se produzca un fadeOut.

A continuaación os pego el código q tengo:

Código PHP:

  <script type="text/javascript"> 
$(document).ready(function(){                        
 
$(".btn-slide-moderna").click(function(){ 
$("#panel-cocina-moderna").slideDown("slow"); 
}); 
    $("ul.galeria").fadeTo(1000, 1); 
; 
}); 
     
     
    /*$(".btn-slide-moderna").click(function(){ 
        $("#panel-cocina-moderna").slideToggle("normal"); 
    }); 
     
    $(".btn-slide-clasica").click(function(){ 
        $("#panel-clasica").slideToggle("slow"); 
    }); 
     
    $(".btn-slide-rustica").click(function(){ 
        $("#panel-rustica").slideToggle("slow"); 
    }); 
     
      
});*/ 
</script> 
 
<script type="text/javascript"> 
 
$(document).ready(function(){ 
$(".btn-cerrar-moderna").click(function(){ 
$("#panel-cocina-moderna").slideUp("slow"); 
$("ul.galeria").fadeOut("fast"); 
}); 
 
     
}); 
</script>  
  

Como podéis ver ni siquiera se si la sintaxis es correcta, se trata de manejar dos eventos por separado. Es decir, por un lado un botón abre el slide y hace un fadein al 100% de opacidad y por otro un botón hace cerrar el slide haciendo un fadeOut a 0 de opacidad. Hay q tener en cuanta que esto debe de funcionar siempre, es decir, que unavez cerrado el panel con el fadeout, cuando se vuelve a pulsar en el fadeIn tiene q funcionar de nuevo, lo digo porque me pasaba q la primera vez funcionaba pero luego no me mostraba de nuevo la lista.

En fin, espero haberme explicado bien (cosa q no tengo muy clara) y sobre todo q me podáis ayudar ya q me urge mucho!

Muchas gracias como siempre!!

[MadDunDee]

Os adjunto de nuevo el código con el q me sucede lo q os comentaba. Aquello de que la primera vez me funciona correctamente. Baja el panel, se produce el fadeIn, le doy a cerrar el panel, se produce el fadeOut. Todo correcto, pero si pulso de nuevo a abrir el panel, ya no se ve el fadeIn niel contenido q quiero mostrar. Código:

Código PHP:

  <script type="text/javascript"> 
 
 
$(document).ready(function(){ 
                            
                            
$("ul.galeria").fadeTo(500, 0); 
$(".btn-slide-moderna").click(function(){ 
$("#panel-cocina-moderna").slideDown("slow"); 
$("ul.galeria").fadeTo(1000, 1); 
}); 
$(".btn-cerrar-moderna").click(function(){ 
$("#panel-cocina-moderna").slideUp("slow"); 
$("ul.galeria").fadeOut("fast").fadeTo(1000,1); 
}); 
}); 
     
     
    /*$(".btn-slide-moderna").click(function(){ 
        $("#panel-cocina-moderna").slideToggle("normal"); 
    }); 
     
    $(".btn-slide-clasica").click(function(){ 
        $("#panel-clasica").slideToggle("slow"); 
    }); 
     
    $(".btn-slide-rustica").click(function(){ 
        $("#panel-rustica").slideToggle("slow"); 
    }); 
     
      
});*/ 
</script>  
  

Muchas gracias!!

[JavierB]

Mensaje movido al foro de Frameworks desde Javascript

Saludos,

[MadDunDee]

Muchas gracias Javier, disculpa el despiste.

Posteo a continuació para comentaros que ya lo he solucionado.

El problema estaba en que mezclaba los métodos fadeIn/out con fadeTo, de modo q era más dificil de conttrolar su comportamiento.

Lo he resuelto de la siguiente manera:

$("ul.galeria").fadeTo(500, 0);
$(".btn-slide-moderna").click(function(){
$("#panel-cocina-moderna").slideDown("slow");
$("ul.galeria").fadeTo(1500,1);
});

$(".btn-cerrar-moderna").click(function(){
$("#panel-cocina-moderna").slideUp("slow");
$("ul.galeria").fadeTo(500,0);
});

});

Vamos, de la forma más lógica posible. Me lié con los métodos y me ha hecho perder mucho tiempo. De cualquier forma daros las gracias y espero que sirva el post para alguna ocasión que un novato más pueda necesitar.

un saludo!!

[mayid]

buenisimo. Y esta mas que recomendado saber javascript para utilizar frameworks. Aun jQuery que es sencillo.