jQuery Introduction | Effects | Controlling Effects .delay() .stop() .finish()

Controlling effects

In jQuery, users can directly control effects by using the following methods.

Setting the delay time for effects

The .delay() method sets the delay time between effects that run sequentially in the running queue.

The following example sets a 1-second delay between a fade-out effect and a fade-in effect.

When the HTML elements are as follows,

<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

when the run button is clicked as shown below, the squares disappear and then appear again. The element whose class is “first” has no delay, the element whose class is “second” has a 0.5-second delay, and the element whose class is “third” has a 1-second delay.

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

Run code

Stopping effects

The .stop() method temporarily stops all effects currently running on the selected element.

In the following example, when the start button is clicked, the size gradually increases, and when the stop button is clicked, the effect pauses.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#stop").on("click", function() {
  $("div").stop();
});

Run code

Finishing effects

The .finish() method removes the queue containing the selected element and ends all effects completely.

In the following example, when the start button is clicked, the size gradually increases, and when the finish button is clicked, the effect ends.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#finish").on("click", function() {
  $("div").finish();
});

Run code

Difference between .delay() and .finish()

The .stop() method and the .finish() method are similar in that both stop a running effect.
The difference is that .stop() pauses the effect temporarily, while .finish() completely ends it rather than pausing it. In other words, if you stop an effect with the .stop() method, you can resume it, but with the .finish() method you cannot resume it and must run it again from the beginning.