Download
Work Along Files
Follow along!
jQuery Tutorial
Animate With jQuery
Use jQuery to select and animate HTML elements
Linking the jQuery Library
To use jQuery we need to link the library to our HTML file
Copy the line of HTML below and add it to the bottom of the body tag - just before the current script tag - in the index.html file
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
This loads the jQuery library into our project! We need this libray to load before our script file.
Select and Animate Elements with Tag Names
Before we can animate an element, we need to know how to select an element.
One of the advantages of jQuery is less typing and to start things off we'll look at the alias function!
Remember: The double forward slash represents a comment in JavaScript code. I will use this to help clarify the code blocks from time to time.
// jQuery Function - The function below is the original function we use with jQuery
jQuery();
// Alias Function - We can use shorthand with the alias below to refer to the jQuery() function!
$();
Open the index.html file in your browser and make note of the headings.
Tip: use ctrl/cmd + o
Open the index.html file in your editor and familiarize yourself with the sections.
Open the script.js file in your editor and take note of the comments.
We have a few options to select a target with jQuery. The fist one we'll use is the HTML tag name.
Find the //SELECTORS comment in the script.js file and add the following alias and selector.
// We place the HTML tag name inside the parenthesis with quotes.
$("button");
Next we'll add a click event to the function using the click() method.
$("button").click();
Now need to tell the click method to do something after the button is clicked.
$("button").click(function() {});
We are using an anonymous function to inside the click method. When we click the button, the statements in this function will fire.
Now we need to select the rectangle we want to animate. Place a return inside the brackets and select the "div" element.
$("button").click(function() {
$("div");
});
To add animation we'll use the animate() method with a css left property to move the element to the right.
$("button").click(function() {
$("div").animate({left: "400px"});
});
Save the script.js file and return to your browser. Click the "Move Right" button.
Notice that all the rectangles moved to the right. This is because We used the tag name as a selector. When we do this, we affect all the HTML elements in the document with that tag name.
Refresh the page and click on one of the buttons below. All the rectangle move to the right. Again, this is cool, but we want to target the first button only.
Select and Animate Specific Elements
One way to target a specific element is to add the :first selector to the end of the tag name. This will allow us to target the first element with that name.
Return to your script file and copy the function we just finished and paste it a couple lines below. Then comment out the first function by putting // in front of the lines.
Now we'll add the :first selector after button tag. Shown below.
$("button:first").click(function() {
$("div").animate({left: "400px"});
});
Another popular selector is the "this" keyword. The cool thing about "this" is that it references the element, function, or object that called it.
Let's replace the "div" in the second statement and see what happens.
$("button:first").click(function() {
$("this").animate({left: "400px"});
});
Return to the browser and test the button.
Now the button moves instead of the rectangle. While this is cool, it's not what we want. Just good to know!
Select and Animate Elements Using Class and ID
Probably the most popular selectors use the class or id of an element. Next we'll add these to our function.
Copy the function we just completed and paste it a couple lines below. Then comment out the second function.
Let's replace the selector for the button with class name inside the button tag. Refernce the first section in the HTML file.
Now let's replace the "this" keyword with the id for the rectangle in the div tag.
Your function shuold look like the one below.
$(".move").click(function() {
$("#rectangle-move").animate({left: "400px"});
});
Return to the browser and test the button.
Now we have targeted the correct button and rectangle! We'll continue to use this selector method in the rest of the tutorial.
It's important to point out an important css property that allows the element to move. Open the css file and scroll down to line 80. We must set the position to reletive in order for these movements to work effectively.
Move The Element Faster
We some control over the speed of the animation. We can add "fast" or "slow" to the statement to change the speed.
Return to the index.html file. Find the class for the second button and id for the second rectangle.
In the script.js file copy the previous function and paste it below the // MOVE RIGHT - FAST comment.
No need to comment out the function. Only the first two will remain commented out.
Replace the class and id names with the names you just found.
In the animate() method place a comma after the css property. Then add a space and type "fast" with the quotes.
Your function should match the one below.
// MOVE RIGHT - FAST
$(".fast").click(function() {
$("#rectangle-fast").animate({left: "400px"}, "fast");
});
When we click the "move faster" button in the browser the second rectangle moves faster than the first.
Refresh the page to compare speeds.
Slide Effect
Another cool animation effect we can use is the slide method.
Copy the previous function and paste it below the // SLIDE TOGGLE comment. Then locate the class and id names for the slide toggle section and replace the current names in the function.
Delete the animate statement and it's contents. Your function should match the one below.
// SLIDE TOGGLE
$(".slideToggle").click(function() {
$("#rectangle-toggle");
});
After the rectangle selector add the following slide method. Don't forget the period!
// SLIDE TOGGLE
$(".slideToggle").click(function() {
$("#rectangle-toggle").slideToggle();
});
Another way to control speed is with miliseconds.
Add 1000 inside the slideToggle parenthesis.
// SLIDE TOGGLE
$(".slideToggle").click(function() {
$("#rectangle-toggle").slideToggle(1000);
});
Test your function in the browser. Since we are using a toggle, you can click the button multiple times.
Hide Element
Go through our copy/paste routine and our replace class/id routine from the previous sections. This time we're working on the hide effect.
Replace the slideToggle() method and its contents with the hide() method. Don't forget the period!
// HIDE
$(".hide").click(function() {
$("#rectangle-hide").hide();
});
Test the hide button in the browser.
Now that the element is gone. We can bring it back with the show() method.
Copy the current function and paste it a couple lines below.
Replace the hide() method with the show() method.
Find the class name for the show button in the index.html file. The test it out!
// HIDE
$(".hide").click(function() {
$("#rectangle-hide").hide();
});
$(".show").click(function() {
$("#rectangle-hide").show();
});
This is cool but we can do both with one button.
Copy/paste the current function a couple lines below. Replace the show() method with the toggle() method.
Replace the class name with the toggle button class name and test it out!
// HIDE
$(".hide").click(function() {
$("#rectangle-hide").hide();
});
$(".show").click(function() {
$("#rectangle-hide").show();
});
$(".hide-toggle").click(function() {
$("#rectangle-hide").toggle();
});
Try adding miliseconds or the "fast" or "slow" keywords in the method parenthesis.
Fade Element
Another cool effect is the fade() method.
Go through you copy/paste routine and replace the class/id with the next section. We're just going to use one method this time.
Now replace the current method with fadeToggle() method.
// FADE TOGGLE
$(".fadeToggle").click(function() {
$("#rectangle-fade").fadeToggle();
});
Test it out in the browser!
Try different speeds!
Bonus: Combine Animations
We can use the animate() method to change multiple css properties and combine effects.
The block of code below contains two css properties: width and opacity.
I've opened the method brackets to make it easier to read.
It also conatins two keywords: slow and swing. Swing refers to the easing (an animation term used to describe the type of acceleration or bezier curve of the timing.) Swing will be slow at the beginning and end of the movement, but it is faster in the middle movement
Copy and paste this into your script file and test it in your browser!
// BONUS: COMBINE ANIMATIONS
$(".animate").click(function() {
$("#rectangle-animate").animate({
width: "toggle",
opacity: "toggle"
},
"slow",
"swing"
);
});
There are many options for animation with jQuery.
Download
Completed Work Along Files
For reference