EFFECTS - finish()

The finish() Effect is used to finish an effect execution at that point of time.

Say, you want to hide a <p> element with fade out effect and as we know, we can use fadeOut() effect for that.

Now, what if you do not want to wait for the fade out effect to complete and finish its execution immediately. And this is where the finish() effect comes into picture.

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 <br/> 
        	by clicking the <br/> 
         	below button 
        </p>
    	<button class = "startClass"> Click to hide the above element </button> 
        <button class = "finishClass"> Click to finish the event </button> 
	  
      	<script>
      
			$('button.startClass').click( function() { 
            	$('p').fadeOut(1500);
            });
            
            $('button.finishClass').click( function() { 
            	$('p').finish();
            });
            
      	</script>      
  	</body>
</html>

Output :

So, in the above code, there are two JQuery statements:

The first one is to hide the <p> element with fade out effect, on first button click.
```
$('button.startClass').click( function() {
	$('p').fadeOut(1500);
});
```

And the second one is to finish the fade out effect immediately(Try the output yourself).
```
$('button.finish').click( function() {
	$('p').finish();
});
```

And to finish the execution immediately, we have used the finish() effect.

$('p').finish();

And the finish() effect finishes the fade out effect immediately, hiding the <p> element.

❮❮ PREV NEXT ❯❯

EFFECTS - finish()

Example :

Output :

The first one is to hide the <p> element with fade out effect, on first button click.

And the second one is to finish the fade out effect immediately(Try the output yourself).