JQUERY - DISPLAY EFFECTS

Say, you want to hide any HTML element.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

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

And interestingly, you can hide the above element using one line. i.e. The hide() effect.

And if you want to make the same hidden element visible, you can do it using the show() effect.

And yes, it is that simple.

Now, this Hide and Show effects are the Display Effects.

There is three types of Display Effect :

hide() - To Hide an HTML element.

show() - To make the hidden element visible.

toggle() - It is a combination of Hide and Show effect. i.e. Hides the visible element and if the element is hidden, makes it visible.

Let the clear the effects with the below example.

hide() Effect

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.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.

show() Effect

The show() Effect is used to make the hidden element visible.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button>
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').hide();
            });
            
            $('button.showClass').click( function() { 
            	$('p').show();
            });
            
      	</script>      
  	</body>
</html>

Output :

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

<p> This is a sentence </p>

And two <button> elements,

The first button is used to hide the element.

<button class = 'hideClass'> Hide </button>

And the second button is used to show the hidden element.

<button class = 'showClass'> Show </button>

We have already seen, how the hide effect works.

Now, let us see, how the show effect can be used to show the hidden element.

So, on Hide button click, the element gets hidden.

<p> This is a sentence </p>

Now, to unhide the above element, we have the below JQuery code,

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

And JQuery locates the element,

$('p').show();

And unhides the element using show() effect.

show() Effect with speed and 'callback function'

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

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button class = 'hideClass'> Hide </button>
    	<button class = 'showClass'> Show </button> 
	  
      	<script>
      
			$('button.hideClass').click( function() { 
            	$('p').hide();
            });
            
            $('button.showClass').click( function() { 
            	$('p').show(1000, function() {
            		alert("The element is visible")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

$('button.showClass').click( function() {
	$('p').show(1000, function() {
		alert("The element is visible")
	});
});

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

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

Now, if you see the callback function,

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

It displays an alert,

alert("The element is visible")

That the element is visible.

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

toggle() Effect

The toggle() Effect is a combination of Hide and Show effect. i.e. Hides the visible element and if the element is hidden, makes it visible.

Example :

<html>
	<head>
		<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

	<body>
		<h1> JQuery </h1>
    	
    	<p> This is a sentence </p>
    	<button> Show/Hide </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').toggle();
            });
            
      	</script>      
  	</body>
</html>

Output :

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

<p> This is a sentence </p>

And a <button> element,

<button> Show/Hide </button>

And on button click, the JQuery action gets triggered,

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

And the toggle() effect gets triggered. So if the element is hidden, it shows it and it the element is visible, it hides it.

Similarly, you can use the speed and callback function with toggle() effect.

Now, let us say, when an element is getting hidden or becomes visible, there is a fading effect.

And that is something we are going to learn in the next tutorial.

❮❮ PREV NEXT ❯❯