How to use a function in Jquery

Question

How to use a function in Jquery

Navigation

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

1

Here take into account that I will only execute the Else; where I want that after applying the css style I would like to call another function

$(document).ready(function () {
		$('.boton').click(function(){
			if ( $('.relat')=="block") {
				
			}else{
				
				$(".relat").css({"display":"block",},function(){
					alert("fsdss22222");
				})

				// .animate({"margin-top":"50px","display":"none"});

			}
		});
	});

.boton{
    width: 100px;
    height: 100px;
    background: slateblue;
    color: white;
    cursor: pointer;
 }
	.relat{
     width: 300px;
     height: 300px;
     background: tan;
     color: red;
     display: none;
 }
	.animado{
     width: 100px;
     height: 100px;
     background: brown;
     color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">Click aqui</div>
<div class="relat">relat
	<div class="animado">animado</div>
</div>

jquery

asked by Gamez 01.04.2017 в 04:19

source

2 answers

2

You are calling the .css() method jQuery "wrong": you have no choice for execute a function as soon as it finishes. In part, because you do not really need it: it runs synchronously, so even if you were to admit a function to be executed after the CSS change, there would be no difference between putting the code in that function or directly after .css() .

The solution is simple: remove the function and put the code just behind the .css . So, instead of doing:

$(".relat").css({"display":"block"}, function(){
    alert("fsdss22222");
})

That does not work, what you should do is:

$(".relat").css({"display":"block"});
alert("fsdss22222");

that will work. Here you can see it working:

function miFuncion() {
  alert("123456");
}

$(document).ready(function () {
  $('.boton').click(function(){
    if ( $('.relat')=="block") {
				
    }else{
				
      $(".relat").css({"display":"block"})
      miFuncion();

    }
  });
});

.boton{
    width: 100px;
    height: 100px;
    background: slateblue;
    color: white;
    cursor: pointer;
 }
	.relat{
     width: 300px;
     height: 300px;
     background: tan;
     color: red;
     display: none;
 }
	.animado{
     width: 100px;
     height: 100px;
     background: brown;
     color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">Click aqui</div>
<div class="relat">relat
  <div class="animado">animado</div>
</div>

And if you want it to be an anonymous function instead of one defined in your code, simply create a function and call it automatically. The idea is the same:

$(document).ready(function () {
  $('.boton').click(function(){
    if ( $('.relat')=="block") {
				
    }else{
				
      $(".relat").css({"display":"block"});
      
      // aquí puedes definir tu función anónima y llamarla
      (function() {
        alert("123456");
      })();

    }
  });
});

.boton{
    width: 100px;
    height: 100px;
    background: slateblue;
    color: white;
    cursor: pointer;
 }
	.relat{
     width: 300px;
     height: 300px;
     background: tan;
     color: red;
     display: none;
 }
	.animado{
     width: 100px;
     height: 100px;
     background: brown;
     color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">Click aqui</div>
<div class="relat">relat
  <div class="animado">animado</div>
</div>

answered by 01.04.2017 в 06:20

What is the difference between these two symbols in php - y = Error adding N elements with Javascript

score 3 · Accepted Answer

In addition to what was exposed by @ Alvaro, it is not possible to perform a function after calling the function CSS of Jquery since it is executed synchronously

I want that after applying the css style I would like to call another function

To simulate this, you could use the setTimeout (function, time) and that if we do not give the delay it will appear that the function is executed before the change in CSS

$(document).ready(function () {
	$('.boton').click(function(){
		if ( $('.relat')=="block") {

		}else{
			$(".relat").css({"display":"block",})
			setTimeout(function(){
					alert("se modificó el display");
			}, 1000);
		}
	});
});

.boton{
width: 100px;
height: 100px;
background: slateblue;
color: white;
cursor: pointer;}
.relat{
 width: 300px;
 height: 300px;
 background: tan;
 color: red;
 display: none;}
.animado{
 width: 100px;
 height: 100px;
 background: brown;
 color: white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">Click aqui</div>
<div class="relat">relat
	<div class="animado">animado</div>
</div>