Learn jQuery: Style Methods

jQuery .animate

The jQuery .animate() method animates the transition of CSS properties to a new state.

The .animate() method can take a JavaScript object as its first argument, and the second optional parameter can be a number (in terms of milliseconds) or certain string keywords. The property names must be in camelCase, and all the values must be strings. If no second argument is provided, the default animation time will be 400 milliseconds.

$('.tile').on('mouseenter', event => {
  $('.tile-text').animate({
    color: '#FFFFFF',
    backgroundColor: '#000000'
  }, 300); // The animation will take place over 300 milliseconds
});

jQuery .css method

The jQuery method .css() can be used to set CSS property values. To change a single CSS property, the method takes two string arguments: the first is the desired CSS property name and the second is the new value.

If the CSS property is not already applied to the object, it will add the new property and set it to the provided value. If the property already exists for the object, it will update the existing value of the property to the new value.

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

jQuery .toggleClass

The jQuery .toggleClass() method combines the effects of the .addClass() and .removeClass() methods. The string argument passed to .toggleClass() is the name of the desired class to toggle and has no period preceding it.

If the class is not currently present on the selected element(s), then .toggleClass() will add the class to it. If the class is currently present on the element(s), then .toggleClass() will remove the class from them.

$('.choice').on('click', () => {
  $('.choice').toggleClass('highlighted');
});

jQuery .css modify multiple properties

The jQuery .css() method can be used to modify multiple CSS properties of an element. To change multiple CSS properties, the method takes a JavaScript object with key-value pairs, where the key is the desired CSS property name (written in camelCase), and the value is a string representing the new value.

In the example code block, the CSS properties color, background-color, and font-size will be modified for all <h2> tags.

$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});

jQuery removeClass

The jQuery .removeClass() method removes a class from a selected element. The string argument passed into the .removeClass() method is the name of the desired class to be removed, and has no period preceding it.

// When the user's mouse exits the '.button' element,
// the 'button-active' class is removed from it.
$('.button').on('mouseleave', event => {
  event.currentTarget.removeClass('button-active');
});

jQuery addClass

The jQuery .addClass() method adds a class to a selected element. The string argument passed into .addClass() is the name of the new class and has no period preceding it, as it is implied to be a class name.

It allows for changes to styles while keeping all style declarations in separate CSS.

// The 'button-active' class is added to the '.button' elements
// when a user's mouse enters the '.button' elements.
$('.button').on('mouseenter', () => {
  $('.button').addClass('button-active'); 
});