Learn jQuery: Style Methods

In this course, you will how to modify elements using jQuery style methods.

Start

Key Concepts

Review core concepts you need to learn to master this subject

jQuery .animate

jQuery .css method

jQuery .toggleClass

jQuery .css modify multiple properties

jQuery removeClass

jQuery addClass

jQuery .animate

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

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.

Style Methods

Lesson 1 of 1

1
CSS & jQuery
At this point, you likely know that jQuery can link user events to dynamic effects on a web page. One of the most powerful toolsets in jQuery allows you to edit CSS property values. With these too…
Start
2
.css()
To modify CSS properties of an element, jQuery provides a method called .css(). This method accepts an argument for a CSS property name, and a corresponding CSS value. It’s syntax looks like: $(‘…
Start
3
CSS II
In addition to changing one property at a time, the .css() method can accept many CSS property/value pairs at once. You must pass the .css() method a JavaScript object with a list of key/value pair…
Start
4
.animate()
The jQuery .animate() method enhances the visual possibilities by making CSS value changes over a period of time. The first argument passed to .animate() is a JavaScript object of CSS property/va…
Start
5
.addClass()
A JavaScript file can quickly get overloaded with styles if you regularly use the css method to modify element styles. It’s a best practice to group all of the style code in a CSS file, and use jQu…
Start
6
.removeClass()
Similar to .addClass(), the jQuery .removeClass() method can remove a class from selected elements. Its syntax is similar to .addClass(): $(‘.example-class’).removeClass(‘active’); In the exampl…
Start
7
.toggleClass()
Similar to other effects methods, you can use a toggle method instead of chaining the .addClass() and .removeClass() methods together. The .toggleClass() method adds a class if an element does not…
Start
8
Review: Style Methods
jQuery can be a wizard at managing your CSS, but as with any powerful magic, it must be handled with care and consideration or you’ll end up with a giant mess! There may be instances where modifyi…
Start