- [Voiceover] In the next several videos…we're going to work on a small animation project.…But I want to step back first…and talk about it a little more generally.…To animate in the browser you can use…CSS or JavaScript, and, therefore, jQuery,…or, spoiler alert, both CSS and JavaScript together.…jQuery's animate method makes JavaScript animations…very easy to do.…The approach you'll take with CSS or jQuery…will be different, but the results can be similar.…So which you choose can often be a matter…of what you find most comfortable.…With CSS, you're using transitions and keyframes,…which are ways to move…between states of DOM elements over time…without using what most people would think of as code.…
In jQuery you use the animate method…to tween numeric CSS properties over time.…It's more flexible, and the code's not complex,…but it is a different way of working with them…than CSS alone.…So besides how you write it,…what are the advantages of one over the other?…With CSS animations are very smooth…and they work well in modern browsers and mobile devices,…
Author
Released
9/1/2016- When to use jQuery
- Installing jQuery
- Setting up functions
- Using jQuery classes
- Modifying the DOM
- Event binding
- Reading and setting values
- Integrating plugins
- Animating websites with jQuery
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome1m 13s
-
What you should know1m 29s
-
Challenges36s
-
-
1. jQuery Introduction
-
When to use jQuery2m 59s
-
Alternatives to jQuery1m 37s
-
Which version to use2m 56s
-
How to install jQuery5m 5s
-
Reference Materials3m 3s
-
2. Essential Concepts
-
Set up functions3m 15s
-
Select elements5m 51s
-
Shorter code with chaining4m 22s
-
Use classes6m 11s
-
Modify the DOM5m 46s
-
Challenge: Form feedback1m 45s
-
Solution: Form feedback2m 9s
-
-
3. It's Easier in jQuery
-
Event binding6m 20s
-
Read and set values5m 9s
-
Attributes and properties6m 57s
-
-
4. Integrate a Plugin
-
Initialize the plugin3m 47s
-
Change gallery options6m 14s
-
5. Animation
-
Simple animations8m 28s
-
Animate numeric properties5m 26s
-
Easing4m 1s
-
Conclusion
-
Next steps: Plugins3m 3s
-
Next Steps: jQuery1m 1s
-
Next Steps: JavaScript1m 12s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: JavaScript or CSS for animation