Animations and Effects
jQuery Effects:
jQuery provides a set of built-in functions for creating various visual
effects on web pages. These effects are commonly used to manipulate the
visibility and appearance of elements dynamically. Here’s a brief
explanation of some key jQuery effects:
1. Hide and Show:
○ $('.submenu').hide(); : Hides elements matched by the selector
.submenu.
○ $('.submenu').show(); : Shows elements matched by the
selector .submenu.
2. Fade Effects:
○ $('element').fadeOut('slow');: Fades out the selected element
slowly.
○ $('element').fadeIn('fast');: Fades in the selected element
quickly.
○ $('element').fadeToggle();: Toggles between fading in and
fading out the selected element.
3. Slide Effects:
○ $('element').slideUp();: Slides up the selected element.
○ $('element').slideDown('normal');: Slides down the selected
element at a normal speed.
○ $('element').slideToggle();: Toggles between sliding up and
sliding down the selected element.
Basic Showing and Hiding
jQuery provides three functions for basic hiding and showing of elements:
• show() makes a hidden element visible. It doesn’t have any effect if the
element is already visible on the page. If you don’t supply a speed value,
the element appears immediately. However, if you supply a speed
value—show(1000), for example—the element animates from the top-left
corner down to the bottom-
left corner.
• hide() hides a visible element. It doesn’t have any effect if the element is
already hidden, and as with the show() function, if you don’t supply a
speed value, the element immediately disappears. However, with a speed
value the element animates out of view in a kind of shrinking motion.
• toggle() switches an element’s current display value. If the element is
currently visible, toggle() hides the element; if the element is hidden, then
toggle() makes the element appear. This function is ideal when you want
to have a single control (like a button) alternately show and hide an
element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Basic Showing and Hiding</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
text-align: center;
display: none; /* Initially hide the box */
}
</style>
<script src="[Link]
<script>
$(document).ready(function() {
// Show the box when clicking the "Show Box" button
$('#showButton').click(function() {
$('.box').show(); // Show the element immediately
});
// Hide the box when clicking the "Hide Box" button
$('#hideButton').click(function() {
$('.box').hide('slow'); // Hide the element slowly over 600
milliseconds
});
// Toggle the box when clicking the "Toggle Box" button
$('#toggleButton').click(function() {
$('.box').toggle(1000);
// Toggle the element with animation over 1 second (1000 milliseconds)
});
});
</script>
</head>
<body>
<button id="showButton">Show Box</button>
<button id="hideButton">Hide Box</button>
<button id="toggleButton">Toggle Box</button>
<div class="box">
This is a box that will show, hide, or toggle based on button clicks.
</div>
</body>
</html>
Fade Effects in jQuery
1. fadeIn():
○ Makes a hidden element gradually fade into view.
○ The element's space appears on the page first, potentially
affecting layout, and then the element becomes visible.
○ Syntax: $(selector).fadeIn(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
Default is 'normal' (400 milliseconds).
■ callback: Optional. A function to execute once the
animation completes.
2. fadeOut():
○ Makes a visible element gradually fade out of view.
○ The element's opacity decreases until it becomes invisible.
○ Syntax: $(selector).fadeOut(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
Default is 'normal' (400 milliseconds).
■ callback: Optional. A function to execute once the
animation completes.
3. fadeToggle():
○ Toggles between fading an element in and fading it out.
○ If the element is visible, fadeToggle() fades it out. If it's hidden,
fadeToggle() fades it in.
○ Syntax: $(selector).fadeToggle(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
■ callback: Optional. A function to execute once the
animation completes.
4. fadeTo():
○ Fades an element to a specific opacity level.
○ Unlike other fade functions, fadeTo() requires a speed value
and a target opacity level (0 to 1).
○ Syntax: $(selector).fadeTo(speed, opacity, callback);
■ speed: Required. Specifies the speed of the animation.
■ opacity: Required. Specifies the target opacity level (0 is
completely transparent, 1 is fully opaque).
■ callback: Optional. A function to execute once the
animation completes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Fading Effects Example</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="[Link]
<script>
$(document).ready(function() {
// Example of fadeIn() and fadeOut()
$('#fadeInButton').click(function() {
$('.box').fadeIn('slow');
});
$('#fadeOutButton').click(function() {
$('.box').fadeOut('fast');
});
// Example of fadeToggle()
$('#fadeToggleButton').click(function() {
$('.box').fadeToggle(1000); // Toggle with animation over 1
second
});
// Example of fadeTo()
$('#fadeToButton').click(function() {
$('.box').fadeTo('normal', 0.5); // Fade to 50% opacity over
'normal' speed
});
});
</script>
</head>
<body>
<button id="fadeInButton">Fade In</button>
<button id="fadeOutButton">Fade Out</button>
<button id="fadeToggleButton">Toggle Fade</button>
<button id="fadeToButton">Fade To 50%</button>
<div class="box">
This is a box that will fade in, fade out, toggle fade, or fade to
50% opacity based on button clicks.
</div>
</body>
</html>
Slide Effects in jQuery
1. slideDown():
○ Makes a hidden element slide into view from the top.
○ The element appears by sliding down, pushing content below it
down as it reveals itself.
Syntax:
○ $(selector).slideDown(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
Default is 'normal' (400 milliseconds).
■ callback: Optional. A function to execute once the
animation completes.
2. slideUp():
○ Makes a visible element slide out of view by moving its bottom
edge upwards.
○ The element disappears by sliding up, collapsing the space it
occupied and moving content below it up.
Syntax:
○ $(selector).slideUp(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
Default is 'normal' (400 milliseconds).
■ callback: Optional. A function to execute once the
animation completes.
3. slideToggle():
○ Toggles between sliding an element down or up based on its
current visibility state.
○ If the element is hidden, slideToggle() slides it down
(slideDown()). If visible, slideToggle() slides it up (slideUp()).
Syntax:
○ $(selector).slideToggle(speed, callback);
■ speed: Optional. Specifies the speed of the animation.
■ callback: Optional. A function to execute once the
animation completes.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Sliding Effects Example</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden; /* Ensure no content leaks outside */
}
</style>
<script src="[Link]
<script>
$(document).ready(function() {
// Example of slideDown()
$('#slideDownButton').click(function() {
$('.box').slideDown('slow');
});
// Example of slideUp()
$('#slideUpButton').click(function() {
$('.box').slideUp('fast');
});
// Example of slideToggle()
$('#slideToggleButton').click(function() {
$('.box').slideToggle(1000); // Toggle with animation over 1
second
});
});
</script>
</head>
<body>
<button id="slideDownButton">Slide Down</button>
<button id="slideUpButton">Slide Up</button>
<button id="slideToggleButton">Toggle Slide</button>
<div class="box">
This is a box that will slide down, slide up, or toggle slide based on
button clicks.
</div>
</body>
</html>
Tutorial exercise : Login form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Login Form Toggle</title>
<style>
#login form {
display: none; /* Initially hide the login form */
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-top: 10px;
}
.close {
background-color: red; /* Style for the button when form is open */
color: white;
}
</style>
<script src="[Link]
<script>
$(document).ready(function() {
$('#open').click(function(evt) {
if ($('#login form').is(':hidden')) {
$('#login form').fadeIn(300); // Fade in the login form
} else {
$('#login form').slideUp(600); // Slide up to hide the login
form
}
});
});
</script>
</head>
<body>
<button id="open">Toggle Login Form</button>
<div id="login">
<form>
<!-- Login form content here -->
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"
name="password"><br><br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Using animate() Function:
The animate() function in jQuery is used to create custom animations on
selected elements.
It allows you to specify CSS properties and values to animate over time,
providing more control and flexibility than the built-in effects like fadeIn(),
fadeOut(), slideDown(), and slideUp().
● Syntax: $(selector).animate(properties, duration, easing, complete);
○ selector: jQuery selector for the element(s) you want to
animate.
○ properties: An object literal containing CSS properties and
values to animate.
○ duration: Optional. Specifies the duration of the animation in
milliseconds (default is 400).
○ easing: Optional. Specifies the easing function to use for the
animation (default is 'swing').
○ complete: Optional. A function to call once the animation is
complete.
Example:
Suppose you have an HTML structure with a <div> element that you want
to animate when clicked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Animating with jQuery</title>
<style>
#animate {
width: 100px;
height: 100px;
background-color: blue;
cursor: pointer;
}
</style>
<script src="[Link]
<script
src="[Link]
<script>
$(document).ready(function() {
$('#animate').click(function() {
$(this).animate(
{
width: '400px',
height: '400px'
},
1000, // Duration in milliseconds
'easeInBounce', // Easing method from jQuery UI
function() {
[Link]('Animation complete!');
}
);
});
});
</script>
</head>
<body>
<div id="animate"></div>
</body>
</html>
Options:
'easeInBack', 'easeOutBack', 'easeInOutBack'
'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
Performing an Action After an Effect Is Completed
In jQuery, performing actions after an effect is completed involves using
callback functions. Here’s a concise explanation of how callback functions
work and how they are used in various scenarios:
Using Callback Functions in jQuery:
1. Basic Usage with Effects:
○ When you want to perform an action after an effect (like fading,
sliding, or animating) is completed, you pass a callback
function to the effect method.
○ Example using fadeIn() and fadeOut():
$('#photo').fadeIn(1000, function() {
$('#caption').fadeIn(1000);
});
In this example, after #photo fades in, #caption fades in as well
due to the callback function.
2. Sequence of Animations:
● You can chain animations and effects by nesting callbacks. This
ensures they execute in the desired order.
● Example with animate() and chaining:
$('#photo').animate(
width: '200px',
height: '100px',
opacity: 1
},
1000,
function() {
$('#caption').fadeIn(1000);
}
);
3. Chaining Effects:
● jQuery allows you to chain multiple effects on the same element.
Each effect in the chain is executed in sequence.
● Example with fadeIn() and fadeOut() chaining:
$('#photo').fadeIn(1000).delay(2000).fadeOut(1000);
This code fades #photo in over 1 second, waits for 2 seconds using
delay(), and then fades it out over 1 second.
4. Handling Multiple Elements:
● Callback functions can also manage effects on multiple elements
sequentially.
● Example moving an element and then fading it and another element
out:
$('#photo').animate(
left: '+=400px'
},
1000,
function() {
$('#caption').fadeIn(1000, function() {
$('#photo, #caption').fadeOut(1000);
});
);
Callback functions in jQuery are crucial for executing actions after
an effect is completed, ensuring animations and visual changes occur
in the desired sequence.
Chaining allows you to perform a series of effects on the same
element or across multiple elements, controlling their order and
timing effectively.
Delay() function helps introduce pauses between chained effects,
enhancing the animation sequence.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>jQuery Animation Example</title>
<style>
#photo {
width: 100px;
height: 100px;
background-color: skyblue;
position: relative;
#caption {
display: none;
margin-top: 10px;
padding: 10px;
background-color: lightgreen;
</style>
<script src="[Link]
<script>
$(document).ready(function() {
$('#photo, #caption').hide(); // Initial hide
// Example 1: Fading in #photo and then fading in #caption
$('#photo').fadeIn(1000, function() {
$('#caption').fadeIn(1000);
});
// Example 2: Animating #photo to the right and then fading
out both #photo and #caption
$('#moveAndFade').click(function() {
$('#photo').animate(
{ left: '+=200px' }, // Move photo to the right
1000,
function() { // Callback function after animation completes
$('#photo, #caption').fadeOut(1000); // Fade out photo and
caption
);
});
// Example 3: Chaining animations to fade in and out
#photo
$('#fadeChain').click(function() {
$('#photo').fadeIn(1000).delay(2000).fadeOut(1000); // Fade
in, delay, then fade out
});
});
</script>
</head>
<body>
<button id="moveAndFade">Move and Fade</button>
<button id="fadeChain">Fade In and Out</button>
<div id="photo"></div>
<div id="caption">This is the caption.</div>
</body>
</html>
Tutorial: Animated Dashboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Hover Animation Example with jQuery UI</title>
<style>
#dashboard {
position: absolute;
top: 50%;
left: -92px;
width: 200px;
height: 50px;
background-color: rgb(255, 211, 224);
padding: 10px;
border-radius: 5px;
color: white;
line-height: 30px;
cursor: pointer;
}
</style>
<script src="[Link]
<script
src="[Link]
<script>
$(document).ready(function() {
$('#dashboard').hover(
function() {
$(this).stop().animate(
left: '0',
backgroundColor: 'rgb(27, 45, 94)'
},
500,
'easeInOutExpo' // Using jQuery UI easing method
); // end animate
},
function() {
$(this).stop().animate(
left: '-92px',
backgroundColor: 'rgb(255, 211, 224)'
},
1500,
'easeInOutExpo' // Using jQuery UI easing method
); // end animate
); // end hover
}); // end ready
</script>
</head>
<body>
<div id="dashboard">Hover over me!</div>
</body>
</html>