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");