-->

jQuery hide() Method

By: Bipin C Mathew 10 months, 1 week ago

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> 

Comments

Let us talk!

We take the vision which comes from dreams and apply the magic of science and mathematics, adding the heritage of our profession and our knowledge to create a design.