Learning jQuery 3 - Fifth Edition

Class animations

The three CSS class methods that we have worked with in previous chapters--.addClass(), .removeClass(), and .toggleClass()--are extended by jQuery UI to take an optional second argument for the animation duration. When this duration is specified, the page behaves as if we had called .animate() and directly specified all of the style attributes that change as a result of applying the class to the element:

$(() => {  $('h1')    .click((e) => {      $(e.target).toggleClass('highlighted', 'slow');    });});

Listing 7.9

By executing the code in Listing 7.9, we've caused a click on the page header to add or remove the highlighted class. Since we specified a slow speed, though, the resulting color, border, and margin changes animate into ...