Join Joe Chellman for an in-depth discussion in this video Enhance a shopping cart with animation, part of jQuery for Web Designers.
- [Voiceover] Now we're going to start working…on a little project that's going to put together…everything we've learned about jQuery so far,…including animation, and it's going to culminate…in a challenge at the end of the chapter.…So here on H+ Sport, we're working with the shop page.…We have our flavored waters...…and we have a cart area over here…that's just been sitting dormant.…So what we're going to do is add a click handler…to each of these items so that when we click it,…it's going to be added to the cart.…And we're going to animate that addition.…The way it'll look is we'll make a little copy…of the image here on each of these items,…and we're going to send it over here into the cart,…and it'll disappear when it gets there.…
That's the general idea, so let's dive right in.…Here, in my text editor, I have the script file open…with a little bit of starter code for you…just so you don't have to write the click handler yourself.…And then I have my index.html file,…which we'll look at in a little bit.…So what we're going to need to do first…
- 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
1. jQuery Introduction
2. Essential Concepts
3. It's Easier in jQuery
4. Integrate a Plugin
- 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.Cancel
Take 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.