Viewers: in countries Watching now:
In this challenge the goal was to refine the animated images, and then add some extra feedback to the shopping card area. Here's my solution. As you can see the images are getting smaller and fading out as they go over here, and then when they get here there is a little message that says, added whatever the thing was. Now, obviously if we were building a real cart, we might want to do something a little more sophisticated. But for our purposes right now it's just about getting some feedback in there. So let's see how this works. Here I am in my solution file. I'll jump down to the end. So most of this is unchanged.
There are just a few modifications. So first of all, I'm animating the CSS opacity which is another numeric property we can touch. And I'm animating it down to zero, even though I didn't have an explicit opacity set in my CSS at the beginning, jQuery still knows what it currently is when you start, and can animate it down to another value. And here's my width which I'm just animating down to 30 pixels. I could animate it all the way down to zero if I wanted. But this looked pretty good to me. And finally I'm modifying this callback, so I'm not just removing my ghost at the end. But I'm also adding this message.
And the way I'm doing that is first crafting the message here. This is perhaps the trickiest bit. So what I'm doing is referring back to this link variable, way up here. Let's look at that. Going to inspect this. Scroll up so you can see a little better. So the original click link surrounds a lot of HTML, there is the image which I found to create my ghost, but then there is also an H4 tag that contains the name of the item, so that's what I was looking for. I go back up to the link, I find that H4 and extract its text.
And then I stick that all inside a string, concatenate it together with a BR tag at the end, so that everything will be on separate lines. I take all of that and append it to the target which is the cart target. So to recap, a couple of extra properties to animate and then making the selection of the original item which I was able to do having save this way up here. You could of course make another selection, but it's more efficient to use your original selection. And then appending it in the right place. So that's how I did. I'm curious to know how you did it.
There are currently no FAQs about jQuery for Web Designers.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.