EFFECTS - slideUp()

The slideUp() effect is used to hide an element using sliding 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>
    	
    	<button> Click to slide up the below element </button> <br/>
    	<p> 
        	In a huge pond,  <br/>
            there lived many fish. <br/>
			They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').slideUp();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above example, we have a <p> element,

<p>
	In a huge pond,  <br/>
	there lived many fish. <br/>
	They were arrogant and <br/>
	never listened to anyone.<br/>
</p>

And a <button> element,

<button> Click to slide up the below element </button>

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

And it happens with the JQuery code,

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

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

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

And JQuery locates the <p> element,

$('p').slideUp();

And Hides the <p> element using the slideUp() effect.

And that's it. The element is hidden with slide up effect.

slideUp() Effect with hide speed

Now, what if you want the <p> element to be slide up 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>
    	
    	<button> Click to slide up the below element </button> <br/>
    	<p> 
        	In a huge pond,  <br/>
            there lived many fish. <br/>
			They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').slideUp(1000);
            });
            
      	</script>      
  	</body>
</html>

Output :

So, there is this parameter in slideUp() effect that determines that how slowly the element would slide up.

slideUp() Effect with speed and 'callback function'

Now, let's say, you want to display a message, stating the element is hidden. And 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>
    	
    	<button> Click to slide up the below element </button> <br/>
    	<p> 
        	In a huge pond,  <br/>
            there lived many fish. <br/>
			They were arrogant and <br/>
            never listened to anyone.<br/>            
        </p>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').slideUp(1000, function() {
            		alert("The element is hidden")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above JQuery statement,

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

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

Note : The values passed to the 'slideUp()' 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.

❮❮ PREV NEXT ❯❯