Learn jQuery: Style Methods
In this course, you will how to modify elements using jQuery style methods.
StartKey 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
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.
- 1At 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…
- 4The 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…
- 5A 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…
- 6Similar 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…
- 7Similar 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…
- 8jQuery 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory