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.
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