1

Lo que pasa es que no se me cumple la condición if ¿Qué puedo corregir para que me funcione?

$(document).ready(function() {
  $('.buscarHMn').click(function() {
    if ($('#cont-campoBusq-relat')!= "none") {
      $('#cont-campoBusq-relat').css("display","block");
      $('#cont-campoBusq').animate({
        backgroundColor: "purple",
        opacity: 100,
      }, 1000);
    } else {
      alert("ELSE");
    }

  });
});
.buscarHMn {
  width: 100px;
  height: 100px;
  background: brown;
  color: white;
  display: inline-block;
}

#cont-campoBusq-relat {
  position: relative;
  width: 200px;
  height: 100px;
  background: slateblue;
  display: none; 
  float: right;
  
}

#cont-campoBusq {
  width: 100px;
  height: 100px;
  opacity: 0;
  background: palevioletred;
  margin-top: 10px;
  display: inline-block;
}
<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">//Esto es asi; tenia el codigo mal
 <div id="cont-campoBusq" class="centFRH">CampoBusq</div> 
</div>

7
  • Sí se ejecuta su sentencia IF.
    – Dev. Joel
    Commented el 31 mar. 2017 a las 1:14
  • pero no aplica el estilo que esta dentro del if
    – Gamez
    Commented el 31 mar. 2017 a las 1:16
  • Porque este codigo no se ejecuta ???, $('#cont-campoBusq').animate({ background: purple, opacity: 100, }, 1000);
    – Gamez
    Commented el 31 mar. 2017 a las 1:57
  • Revisar mi respuesta , en primer lugar el valor de la propiedad background debe ir entre comillas , luego en nombre de la propiedad es backgroundColor para Jquery-UI
    – Dev. Joel
    Commented el 31 mar. 2017 a las 2:02
  • Perfecto me funciona, ahora me falta asignarle un calback; luego que se ejecute la animación querré que empiece otra animacion , mañana lo hare por ejemplo algo así
    – Gamez
    Commented el 31 mar. 2017 a las 2:35

2 respuestas 2

2

En primer lugar si ingresa al bloque del IF

¿Por qué no muestra la animación de cambio de color ?

Porque Jquery/Animate especifica claramente que no todas las propiedades pueden ser animadas haciendo solo uso de Jquery/Animate,se requiere un plugin extra como Jquery-Color , o Jquery-UI

No olvidar que los valores para las propiedades van entre comillas (simples o dobles)

Ejemplo:

$('#cajita').click(function(){
  $(this).animate({
	  color: 'red',
      backgroundColor : '#fff'
  }, 1000);

});
#cajita{
background:yellow;
width:40px;
height:40px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <div id="cajita" >Click</div>

UPDATE

Recordar que el método Animate posee sus propias Funciones Callback , en este ejemplo doy un ejemplo de complete , también se le puede pasar una función Anónima de la siguiente forma.

$('#cajita').animate({
     ...
},1000, function() { 
    /* End Animate */
    }
});

Función Callback complete

$('#cajita').click(function(){
  $(this).animate({
	    color: 'red',
      backgroundColor : '#fff'
  },{
	 complete:  function() { 
	 alert('final animación 1'); 
    }
  });
});
#cajita{
  background:yellow;
  width:40px;
  height:40px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div id="cajita" >Click</div>

2

El error lo tienes en:

<!-- language: lang-js -->
if ($('#cont-campoBusq-relat')!= "none") 

Siempre será distinto de "none" ya que estas comparándolo con un objeto (la div con ese ID); te sugiero lo siguiente:

<div id="cont-campoBusq-relat" style="display:none">

además

<!-- language: lang-js -->
if ($('#cont-campoBusq-relat').css("display")== "none") {
  // tu código
} else {
   // tu código
   $('#cont-campoBusq-relat').css("display","none");
}

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.