JQuery and Animations
JQuery and Animations
JQuery and Animations is a free jQuery Academy lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction
Hello,
In this section, we will learn animation with jQuery.
Let's get started.
show - hide method
show() and hide() methods
We can show and hide a DOM object on the screen with the show and hide methods.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>toggle method
toggle() method
In addition to these, there is the toggle() method that we can guess what it does from its name. With this method, if the element is hidden, it will be shown. If it is shown, it will be hidden.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>fadein and fadeout
fadeIn() and fadeOut() methods
Now let's see the fadeIn and fadeOut methods that animated showing and hiding HTML elements.
The fadeIn and fadeOut method optionally expects a number value in milliseconds. The value determines how many milliseconds the animation takes. If we do not pass an argument, it takes the default value.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein and fadeout
fadeOut reduces the opacity of elements for a certain time. And when its opacity is 0, the display property becomes none.
It is the version of the hide() method we learned above, supported by opacity animation.
FadeIn is the opposite of the fadeOut method.
fadeToggle method
fadeToggle() method
The fadeToggle() method is similar to the toggle() method. If it is hidden, it shows it. If it is shown, it hides it, and as you can imagine, it does this with animation.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>CSS Animation
CSS Animations
Animations in jQuery are performed by the animate() method. This method defines the JSON argument inside. In this JSON, we define which CSS properties of the target element will change.
The second parameter is animation time as milliseconds (It's optional parameter)
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Animation event handler
Animation event handler
The last argument we can assign to the animate method is the event handler that we can run if the animation ends.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>relative animation
Let's also mention a little convenience about animations.
The properties to be used in animations can be assigned relative values instead of passing absolute values.
We can understand more clearly in the example below.
During the animation, 100px was added to the top property of the relevant target element.
$("button").animate({
top: "+=100px",
});stop animation
Stopping Animation
To stop an animation that is currently running, it is sufficient to select the target for which the animation is defined and use the stop() method.
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Pre-made
Pre-made
As we can create animations by defining custom CSS properties with jQuery, we can also use pre-made methods by jQuery.
Come on, let's examine the following code.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");relative animation duration
As in other animation methods, we should pass as the first argument if we want to assign the duration of the animation in this method.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");event handler
The last thing I will tell you about slide animation. Hmm, I guess I forgot.
Just like in the animate method (to define an event handler to run when the animation is completed), we can define the anonymous function to the above methods as the 2nd argument.
setTimeout(function() {
//Call when animation is completed
}, 1000);Congratulations
Congratulations 🎉
We learned JQuery and Animations.
In the next section, we will learn the AJAX Operations.
Frequently asked questions
Is the “JQuery and Animations” lesson free?
Yes — the full text of “JQuery and Animations” is free to read here on the web, and the jQuery Academy course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.
What will I learn in “JQuery and Animations”?
JQuery and Animations You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start jQuery Academy?
No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.
How long does the “JQuery and Animations” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this jQuery Academy lesson?
Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.