EFFECTS - stop()

The stop() Effect is used to stop 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 pause its execution immediately. And this is where the stop() 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(2500);
            });
            
            $('button.finishClass').click( function() { 
            	$('p').stop();
            });
            
      	</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(2500);
});
```

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

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

$('p').stop();

And the stop() effect doesn't let the fade out effect finish. But halts it where ever it is at that point of time.

❮❮ PREV NEXT ❯❯

EFFECTS - stop()

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 stop the fade out effect immediately(Try the output yourself).