Learning jQuery 3 - Fifth Edition

Disabling all effects

We have already discussed a way to halt animations that are currently running, but what if we need to disable all animations entirely? We may, for example, wish to provide animations by default, but disable those animations for low-resource devices where animations could look choppy, or for users who find animations distracting. To do so, we can simply set the $.fx.off property to true. For our demonstration, we will display a previously hidden button to allow the user to toggle animations on and off:

$(() => {  $('#fx-toggle')    .show()    .on('click', () => {      $.fx.off = !$.fx.off;    });}); 

Listing 11.4

The hidden button is displayed between the introductory paragraph and the subsequent images:

When the user clicks on the ...