Using .animate() in jQuery
I’m currently in week 8 at Flatiron School and it’s been amazing so far. I’ve fallen in love with Ruby and I appreciate how developer friendly it is. Last week we started to learn Javascript. Before I came to Flatiron, I had messed around with some Javascript so this has allowed me to pick up where I left off. I love Ruby, but as awesome as it is to parse data, I still love using Javascript to create something visual.
I’m currently working on building my portfolio site (it’s still a work in progress, but you can see it here) and I ran into an issue where I had a set of divs that either had the class “design” or the class “development.” I also had three buttons with the values “Show All,” “Design,” and “Development.” My goal was that when someone clicked on “Design,” all of the divs with the class “development” would be hidden, allowing the user to only see what has the class “design.” The same thing would happen when someone clicked the “Development” button except that only those with the class “development” would be shown. When the user clicks “Show All,” all of the divs would be shown. To do this, I used jQuery’s fadeIn/fadeOut effect. See the pen below for an example.
The problem with this is that it’s clunky. Once the divs disappear, the remaining divs snap into the next available position since they are floating left. I don’t consider myself a master of jQuery in the slightest bit so I decided to ask for some advice on Stack Overflow. Someone recommended that I use jQuery’s animate function so I tried that and came up with the pen below.
This uses animate to toggle the width and opacity. So if “Hide Red” is clicked, the divs with the class “red” will be animated away.
Doing this made me think of other ways that animate can be used, because who doesn’t love seeing a bunch of squares sliding across the screen? The animate function can take in four different arguments: properties, duration, easing, and complete. Properties is what the CSS will be by the time the animation is complete. In the example above, I change the width and the opacity of the divs. Duration is the length of the animation in milliseconds. Easing is the easing function that will be used for the animation. The default easing for animation is “swing.” Complete is the function that can be called once the animation is complete. In the pen below, I utilize all of these arguments to allow Stellan the Sloth to show himself (if you’ve been reading my blogs at all, you probably know that I love sloths).
When you click on “See Stellan the Sloth” the first animation function is triggered. The property that is changed in the animation is the “left” property, the duration is 2 seconds (2000 milliseconds), the ease is set to “linear,” and then another animation is called which slides Stellan back off the screen (sorry, he’s shy). You can probably see from this example how cool animations can be by calling functions once the animation is complete.
To see more about the power of the animate function check out the documentation here. The jQuery documentation is great and has some really helpful examples. Also, try to create a few pens on Codepen and play around with the animation function and see what you can come up with! Make sure that you allow jQuery to be used by clicking the gear icon next to JS and selecting “jQuery” from the “Quick-add” dropdown. This should save you a lot of time figuring out why your simple animation is doing absolutely nothing. Make sure to check out other people’s creations on there as well. There are some really amazing things that people are making using the animate function.
