The hide method is a Jquery Effects Method. It is used to hide selected element which is similar to the CSS property display:none. To show hidden elements, we use the show() method.

Syntax:

$(selector).hide(speed,easing,callback)  

Parameter: It accepts three parameters

  1. duration: Specifies the speed of the hide effect.
  2. easing: Specifies the speed of the element at different point of animation.
  3. call_function: Call back function to be executed after hide operation.

Example:

Without parameters-

<html> 

<head> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
	<!-- jQuery code to show the working of this method -->
	<script> 
		$(document).ready(function() { 
			$(".b1").click(function() { 
				$("p").hide(); 
			}); 
		}); 
	</script> 
	<style> 
		div { 
			width: 50%; 
			height: 80px; 
			padding: 20px; 
			margin: 10px; 
			border: 2px solid green; 
			font-size: 30px; 
		} 
		
		.b1 { 
			margin: 10px; 
		} 
	</style> 
</head> 

<body> 
	<div> 
		<p>Atemon!.</p> 
	</div> 
	<!-- click on this button and above paragraph will disappear -->
	<button class="b1">Click me !</button> 

</body> 

</html> 

With parameter

<html> 

<head> 
	<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
	</script> 
	<script> 
		<!-- jQuery code to show the working of this method -->
		$(document).ready(function() { 
			$(".btn1").click(function() { 
				$("p").hide(1000, function() { 
					alert("Hide() method has finished its working!"); 
				}); 
			}); 
		}); 
	</script> 
	<style> 
		p { 
			width: 40%; 
			padding: 20px; 
			height: 50px; 
			border: 2px solid green; 
		} 
	</style> 
</head> 

<body> 

	<p>Atemon.!</p> 
	<!-- click on this button and above paragraph will hide -->
	<button class="btn1">Click to Hide</button> 

</body> 

</html>