EFFECTS - hide()

The hide() Effect is used to hide an HTML element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> Hide this element by clicking the below button </p>
    	<button> Click to hide the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').hide();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a  element,

<p> Hide this element by clicking the below button </p>

And a <button> element,

<button> Click to hide the above element </button>

And on button click, we want to hide the above element.

And it happens with the JQuery code,

$('button').click( function() {
	$('p').hide();
});

So, what happens is, on button click, the click() event gets triggered,

$('button').click(...);

And JQuery locates the  element,

$('p').hide();

And Hides the  element using the hide() effect.

And that's it. The element is hidden.

hide() Effect with hide speed

Now, what if you want the  element to be hidden slowly. And there is a second parameter that determines the speed as in how to hide the element. It could be fast, slow or milliseconds.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> Hide this element by clicking the below button </p>
    	<button> Click to hide the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').hide(1000);
            });
            
      	</script>      
  	</body>
</html>

Output :

So, there is this parameter in hide() effect that determines that how slowly the element would be hidden.

hide() Effect with speed and 'callback function'

Now, let's say, you want to display a message, stating the element is hidden. You can achieve it using a callback function.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p> Hide this element by clicking the below button </p>
    	<button> Click to hide the above element </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').hide(1000, function() {
            		alert("The element is hidden")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

$('button').click( function() {
	$('p').hide(1000, function() {
		alert("The element is hidden")
	});
});

Along with the hide() effect, we have used the hide speed as the first parameter and callback function as the second parameter.

Note : The values passed to the 'hide()' effect are called parameters.

Now, if you see the callback function,

function() {
	alert("The element is hidden")
}

It displays an alert,

alert("The element is hidden")

That the element is hidden.

In simple words, on button click the  element is hidden in 1000 milliseconds and once the  element is completely hidden, we get the alert, The element is hidden.

❮❮ PREV NEXT ❯❯