1

Pongo otra pregunta con el problema ya solucionado, pero me falta añadirle animación.

Esto es lo que vendría siendo el menú:

 <div class="row men">
   <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
     <h3>DEPILACIÓN <br>LÁSER</h3> 
   </div>
 <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center">
     <h3>LIFTING <br> SIN CIRUGÍA</h3>         
 </div>
 <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>       
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
 </div>

Esto es donde mostramos los diferentes `div``

 <div id="ContenidoLifting" class="container disNone moduMoradoInterior">
   <h3>Esto el contenido de lifting</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At velit natus itaque a eum. Harum incidunt odio, iure maiores amet quos impedit ipsa id veniam necessitatibus? Enim ab, maxime quam?</p>
 </div>
 <div id="ContenidoLipoescultura" class="container disNone moduMoradoInterior">
   <h3>Esto el contenido de lipoescultura</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At velit natus itaque a eum. Harum incidunt odio, iure maiores amet quos impedit ipsa id veniam necessitatibus? Enim ab, maxime quam?</p>
  </div>
  <div id="ContenidoTattoos" class="container disNone moduMoradoInterior">
    <h3>Esto el contenido de tattoos</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At velit natus itaque a eum. Harum incidunt odio, iure maiores amet quos impedit ipsa id veniam necessitatibus? Enim ab, maxime quam?</p>
  </div>

Este es el JavaScript que utilizo ahora para mostrar o ocultar:

$('div.men > div').on('click',function(){
 $('div.men > div').removeClass('active');
    $(this).addClass('active');
});

$(document).ready(function(){
$("#depilacion").on( "click", function() {        
    $("#divMenu > div").not($('#ContenidoDepilacion')).hide(500);        
    $('#ContenidoDepilacion').show(500);
    //$('#ContenidoDepilacion').fadeIn("slow");      
 });
$("#lifting").on( "click", function() {
  $("#divMenu > div").not($('#ContenidoLifting')).hide(500);        
  $('#ContenidoLifting').show(500); 
});
$("#lipoescultura").on( "click", function() {
   $("#divMenu > div").not($('#ContenidoLipoescultura')).hide(500);        
    $('#ContenidoLipoescultura').show(500); 
});
  $("#tattoos").on( "click", function() {
  $("#divMenu > div").not($('#ContenidoTattoos')).hide(500);        
  $('#ContenidoTattoos').show(500); 
});
});

Lo que quiero es darle efectos a el hide y al show. Como por ejemplo : .fadeIn("slow");

7
  • Hola, no termina de quedarme claro lo que quieres hacer. ¿A qué te refieres con "según vaya cambiando el div se muestre el que toca"? ¿Podrías poner también tu CSS?
    – Kiko_L
    Commented el 6 nov. 2018 a las 7:09
  • Voy a poner una respuesta @Kiko_L de la forma que lo acabo de solucionar, aunque no se si es la correcta, pero funciona....
    – Miguel
    Commented el 6 nov. 2018 a las 7:10
  • Acabo de editar mi respuesta. En vez de utilizar el callback de fadeOut lo que hago es llamar a promise() que crear una Promise y espera hasta que termine la animación para lanzar el fadeIn. Échale un vistazo a api.jquery.com/promise
    – Kiko_L
    Commented el 7 nov. 2018 a las 8:43
  • Muchas gracias!!!! @Kiko_L funciona a la perfección
    – Miguel
    Commented el 7 nov. 2018 a las 8:46
  • Ya que estás aprovecha para leer sobre las Promises. Son un concepto muy, muy interesante. developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… Y no olvides marcar como correcta la respuesta que consideres oportuna ;)
    – Kiko_L
    Commented el 7 nov. 2018 a las 9:00

2 respuestas 2

1

Lo solucione así pero no se si es la forma correcta:

  $(document).ready(function(){
      $("#depilacion").on( "click", function() {
        $('#ContenidoDepilacion').show(500,);
        $('#ContenidoLifting').hide(500,);
        $('#ContenidoLipoescultura').hide(500,);
        $('#ContenidoTattoos').hide(500,);
       });
      $("#lifting").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').show(500);
        $('#ContenidoLipoescultura').hide(500);
        $('#ContenidoTattoos').hide(500);
      });
      $("#lipoescultura").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').hide(500);
        $('#ContenidoLipoescultura').show(500);
        $('#ContenidoTattoos').hide(500);
      });
      $("#tattoos").on( "click", function() {
        $('#ContenidoDepilacion').hide(500);
        $('#ContenidoLifting').hide(500);
        $('#ContenidoLipoescultura').hide(500);
        $('#ContenidoTattoos').show(500);
      });
    });

Edito

Puedes reducir el código poniendo tus divs dentro de otro div (divMenu) y filtrando con el selector .not

   $(document).ready(function () {
$("#depilacion").on("click", function () {
    $("#divMenu div").not($('#ContenidoDepilacion')).fadeOut("slow").promise().done(function () {
        $('#ContenidoDepilacion').fadeIn("slow");
    });
});

$("#lifting").on("click", function () {
    $("#divMenu div").not($('#ContenidoLifting')).fadeOut("slow").promise().done(function () {
        $('#ContenidoLifting').fadeIn("slow");
    });
});
$("#lipoescultura").on("click", function () {
    $("#divMenu div").not($('#ContenidoLipoescultura')).fadeOut("slow").promise().done(function () {
        $('#ContenidoLipoescultura').fadeIn("slow");
    });
});
$("#tattoos").on("click", function () {
    $("#divMenu div").not($('#ContenidoTattoos')).fadeOut("slow").promise().done(function () {
        $('#ContenidoTattoos').fadeIn("slow");
    });
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3> 
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>   
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
     <h3>LIPOESCULTURA</h3>   
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
     <h3>ELIMINACIÓN <br> TATTOOS</h3>  
  </div>
  <div id="divMenu">
    <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
    <div id="ContenidoLifting" class="">Hola contenido lifting</div>
    <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
    <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
  </div>
 </div>

4
  • Con tu permiso te edito la respuesta y añado una versión algo más resumida de tu código.
    – Kiko_L
    Commented el 6 nov. 2018 a las 7:24
  • Esto está estupendo Kiko_L!!!! funciona perfecto, esa animación de show(500), se puede cambiar por alguna otra?
    – Miguel
    Commented el 6 nov. 2018 a las 7:34
  • Te recomiendo que le eches un vistazo al método animate() de jQuery.
    – Kiko_L
    Commented el 6 nov. 2018 a las 7:47
  • Gracias! @Kiko_L
    – Miguel
    Commented el 6 nov. 2018 a las 7:49
0

He separado el divde contenido respecto del row men para diferenciarlo, si quieres tu misma estructura solamente deberas ajustar los selectores. De esta forma se muestra y se desvanece si vuelves a hacer click en los elementos. Deberias entender el porque de cada cosa y como utilizar atajos con jQuery, te será más facil realizar estas pequeñas cosas.

$(document).ready(function() {
	$('.mostrar div').hide();
});

$('div.men > div').on('click',function(){
		
  if($(this).attr('id')=='depilacion' & $('.mostrar div#ContenidoDepilacion').css('display') == 'none' ){
   
  	$('.mostrar div#ContenidoDepilacion').slideDown("slow"); 
   }else{
   	$('.mostrar div#ContenidoDepilacion').hide(); 
   }
  
  if($(this).attr('id')=='lifting'  & $('.mostrar div#ContenidoLifting').css('display') == 'none' ){
    
  	$('.mostrar div#ContenidoLifting').fadeIn("slow");
  }else{
    $('.mostrar div#ContenidoLifting').hide();
  }
  if($(this).attr('id')=='lipoescultura'  & $('.mostrar div#ContenidoLipoescultura').css('display') == 'none' ){
  	$('.mostrar div#ContenidoLipoescultura').fadeIn("slow");  
  }else{
    $('.mostrar div#ContenidoLipoescultura').hide(); 
  }
  if($(this).attr('id')=='tattoos'  & $('.mostrar div#ContenidoTattoos').css('display') == 'none' ){
  	$('.mostrar div#ContenidoTattoos').fadeIn("slow");
  }else{
    $('.mostrar div#ContenidoTattoos').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3>
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
    <h3>LIPOESCULTURA</h3>
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
    <h3>ELIMINACIÓN <br> TATTOOS</h3>
  </div>
</div>
<div class="mostrar">
  <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
  <div id="ContenidoLifting" class="">Hola contenido lifting</div>
  <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
  <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
</div>

5
  • Hola de nuevo @ntzz, probe tu solución, pero me muestra me va mostrando todos pero sin ocultar los demás, se puede poner además animación??
    – Miguel
    Commented el 6 nov. 2018 a las 7:32
  • @Miguel Creo que esto es lo que pides, he añadido un par de efectos diferentes, puedes utilizar animate y realizar la animación que tu desees. EJ: jqueryui.com/toggle
    – ntzz
    Commented el 6 nov. 2018 a las 8:22
  • Que lo añado aquí al final? $("#depilacion").on( "click", function() { $("#divMenu div").not($('#ContenidoDepilacion')).hide(500); $('#ContenidoDepilacion').show(500); }); @ntzz
    – Miguel
    Commented el 6 nov. 2018 a las 10:41
  • Eso es otra forma diferente, no tiene nada que ver. Tampoco entiendo a lo que te refieres, si quieres editar tu pregunta con el codigo nuevo que estas usando y así intentamos ayudarte de la mejor manera posible.
    – ntzz
    Commented el 6 nov. 2018 a las 11:02
  • Hola de nuevo @ntzz acabo de actualizar la pregunta para poder enseñarte donde quiero mostrar la animación. Gracias
    – Miguel
    Commented el 7 nov. 2018 a las 8:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.