jQuery Effects - Finish

jQuery Effects - Finish: Learn about the jQuery finish() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 25, 2022

jQuery finish() Method

The finish() method, as the name indicates, helps to complete the process as soon as it is triggered. When the finish() method runs, it completes all the processes related to the selected element. It does not stop the processes then and there, instead finishes it by completing the whole event faster. It stops the animation and immediately, takes it to the finishing results.

finish() Method Syntax

$('selector').finish();

This method is very simple to use. Just select the element on which all the animations are running that you want to stop as soon as possible. Also, this method does not take any parameters. It just returns the element with its final values and position accordingly.

The example given below shows how to implement the finish() method of jQuery. The image tag gets faded on clicking the fade button. But, if this event has to be processed faster with just one click, then the finish button ends it. The process gets completed when the finish button is clicked.

jQuery finish() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Finish</h2>
    <p>Click the button to finish the animation on the image.</p>
    <button id="button1">Fade</button>
    <button id="button2">Finish</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('#button1').click(function() {
            $('img').fadeToggle('slow');
        });
    
        $('#button2').click(function() {
            $('img').finish();
        })
    });
  </script>
</html>

Output:

jQuery - Effects: Clear Queue

jQuery - Callback Function

Comments and Discussions!

Load comments ↻