2

Y ahora cómo puedo hacer la funciones de reversa ?, al dar el click Quiero que cuando el div cont-campoBusq-relat sea display:block; quiero que quite los estilos que se asignaron cuando le dimos click, la funcion que me gustaria que iciera es dar opacidad primero y luego darle display: none; a cont-campoBusq-relat

$(document).ready(function () {
        $('.buscarHMn').click(function () {
            if ($('#cont-campoBusq-relat') != "block") {
               $('#cont-campoBusq-relat').css({display:"block",});
      			setTimeout(function(){
					 $('#cont-campoBusq').animate({"opacity":"100"});
			}, 1000); 
            } else {
    			alert("ELSE");
    		}
        });
    });
.buscarHMn{
  width:100px;
  height: 100px;
  background:gray;
  color: white;
}
#cont-campoBusq-relat{
  display: none;
  width:100px;
  height: 100px;
  background:brown;
  color: white;
  
}
#cont-campoBusq{
  display: ;
  width:70px;
  height: 80px;
  background:orange;
  color: white;
  opacity:0;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buscarHMn">Click</div>
<div id="cont-campoBusq-relat">
    <div id="cont-campoBusq"</div>
</div>

1 respuesta 1

2

Para terceros trabajar con tu codigo esta un poco complicado, por tal motivo te dejo un ejemplo (comentado y sencillo) funcional y trabaja con la misma logica a tu problema.

la clave de solucion para este tipo de problemas es:

1- crear una clase extra desde css

2- en base al valor de una variable que se active y desactive esa clase del inciso(1) con los eventos addClass y removeClass 

    $(document).ready(function () {
    var num=0;//variable auxiliar 
            $('.buscarHMn').click(function () {
              if(num==0){// atraves de su valor realizamos las modificaciones
                $(this).removeClass('buscarHMn');
                $(this).addClass('nuevaClase');
                num=1;
              }else{
                $(this).removeClass('nuevaClase');
                $(this).addClass('buscarHMn');
                num=0;
              }    
            });
        });
    .nuevaClase{
      width:100px;
      height: 100px;
      background:gray;
      color: white;
    }
    .buscarHMn{
      width:100px;
      height: 100px;
      background:red;
      color: black;
    }

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="buscarHMn">Click</div>
    <div id="cont-campoBusq-relat">
        <div id="cont-campoBusq"</div>
    </div>

ahora resolviendo o almenos tratando de resolver:

la condicion if ($('#cont-campoBusq-relat') != "block") { esta mal deberia ser

if ($('#cont-campoBusq-relat').css('display') != 'block') {

 $(document).ready(function () {
            $('.buscarHMn').click(function () {
                if ($('#cont-campoBusq-relat').css('display') != 'block') {// actualmente es display:none, asi que cumple y entrara al cuerpo del if
                   $('#cont-campoBusq-relat').css({display:"block"});
                   setTimeout(function(){
					 $('#cont-campoBusq').animate({"opacity":"100"});
			}, 1000); 
                } else {
            $('#cont-campoBusq').animate({"opacity":"0"});//para que desaparesca 
            setTimeout(function(){
				 $('#cont-campoBusq-relat').css({display:"none",});//aplicamos none para que pueda ingresar al `if`
		}, 1000); 
    			
    		}
            });
        });
    .buscarHMn{
      width:100px;
      height: 100px;
      background:gray;
      color: white;
    }
    #cont-campoBusq-relat{
      display: none;
      width:100px;
      height: 100px;
      background:brown;
      color: white;
      
    }
    #cont-campoBusq{
      display: ;
      width:70px;
      height: 80px;
      background:orange;
      color: white;
      opacity:0;
      
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="buscarHMn">Click</div>
    <div id="cont-campoBusq-relat">
        <div id="cont-campoBusq"</div>
    </div>

6
  • no amigo asi no busco la solucion, esa la conozco yo busco es aprender varios metodos y quiero aprender es del codigo que mostre
    – Gamez
    Commented el 2 abr. 2017 a las 15:36
  • si ejecutas mi codigo veras que todo esta bien al mostrar pero ahora mi pregunta es como retirarlo de igual manera
    – Gamez
    Commented el 2 abr. 2017 a las 15:37
  • porfa puedes hacer que primero desaparezca por medio de la opacidad el div cont-campoBusq y luego le asinas el display: none a cont-campoBusq-relat, quiero que haa las mismas funciones como cuando aparece pero en este caso de modo inversa
    – Gamez
    Commented el 2 abr. 2017 a las 16:13
  • amigo explicame eso porque estaba mal ???
    – Gamez
    Commented el 2 abr. 2017 a las 16:27
  • ese era el problema el porque no pude avanzar si me explicas porfa
    – Gamez
    Commented el 2 abr. 2017 a las 16:27

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.