Execute a conditional where it is different from block JQUERY

Question

Execute a conditional where it is different from block JQUERY

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

What happens is that the condition if is not fulfilled What can I correct so that it works for me?

$(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>

jquery

asked by Gamez 31.03.2017 в 02:47

source

2 answers

How do you remove elements from a winforms in C #, dynamically? Show more than one result json

score 2 · Answer 1

First of all if you enter the block of IF

Why does not it show the color change animation?

Because Jquery / Animate clearly specifies that not all properties can be animated by using only Jquery / Animate , an extra plugin is required as Jquery-Color , or Jquery-UI

Do not forget that the values for the properties are enclosed in quotes (single or double)

Example:

$('#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

Remember that the method Animate has its own functions Callback , in this example I give an example of complete , you can also pass an anonymous function in the following way.

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

Callback function 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>

score 2 · Answer 2

The error is in:

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

It will always be different from "none" since you are comparing it with an object (the div with that ID); I suggest the following:

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

also

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