JQuery Unit-3
Uploaded by
Tulshiram KambleJQuery Unit-3
Uploaded by
Tulshiram KambleEffects and Events
Unit-3
3.1 Showing/Hiding Elements
• This effect allows you to show or hide an HTML element.
• .show(): Displays the hidden element.
• .hide(): Hides the element.
Example
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box" style="width:100px; height:100px; background:orange;"></div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
$(document).ready(function () {
$("#show").click(function () { $("#box").show(); });
$("#hide").click(function () { $("#box").hide(); });
});
</script>
</body>
</html>
3.2 Sliding Elements
• Sliding in jQuery refers to showing or hiding HTML elements by
changing their height with a sliding motion. It creates an animated
effect where an element gradually expands or collapses vertically.
• This effect allows you to make elements slide up or slide down
vertically.
• .slideUp(): Hides the element by sliding it up.
• .slideDown(): Shows the element by sliding it down.
Example:
<html> <script>
<head> $(document).ready(function() {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style> // Slide down the box when "Slide Down" is clicked
#box { $("#slideDownBtn").click(function() {
width: 200px; height: 100px;
$("#box").slideDown("slow");
background-color: lightblue; margin: 20px auto;
text-align: center; line-height: 100px; });
font-size: 20px; display: none;
}
button { // Slide up the box when "Slide Up" is clicked
margin: 10px; $("#slideUpBtn").click(function() {
padding: 10px 20px; $("#box").slideUp("slow");
font-size: 16px;
} });
</style> });
</head> </script>
<body>
<button id="slideDownBtn">Slide Down</button> </body>
<button id="slideUpBtn">Slide Up</button> </html>
<div id="box">Hello!</div>
Fading elements
• Fading refers to gradually changing the opacity of an element to make
it appear or disappear smoothly.
• jQuery provides four primary fading methods:
• fadeIn(): Gradually increases the opacity of a hidden element to make
it visible.
• fadeOut(): Gradually decreases the opacity of an element to make it
disappear.
• fadeToggle(): Toggles between fadeIn() and fadeOut() based on the
element's current state.
• fadeTo(speed, opacity): Fades the element to a specified opacity
(from 0 to 1).
Example
<html> <script>
<head>
<script
$(document).ready(function() {
src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $("#fadeInBtn").click(function() { $("#box").fadeIn("slow");
<style> });
#box { $("#fadeOutBtn").click(function() { $
width: 200px; height: 100px;
background-color: lightcoral; margin: 20px auto; ("#box").fadeOut("slow"); });
text-align: center; line-height: 100px;
font-size: 20px; color: white; $("#fadeToggleBtn").click(function() {
}
button { $("#box").fadeToggle("slow");
margin: 10px; });
padding: 10px 20px;
font-size: 16px;
} // Fade to 50% opacity
</style> $("#fadeToHalfBtn").click(function() {
</head>
<body> $("#box").fadeTo("slow", 0.5);
<button id="fadeInBtn">Fade In</button> });
<button id="fadeOutBtn">Fade Out</button>
<button id="fadeToggleBtn">Fade Toggle</button> });
<button id="fadeToHalfBtn">Fade To 50%</button> </script>
<div id="box">Hello!</div> </body>
</html>
Deleting animation elements
• In jQuery, you can use deletion methods with animation to remove
elements from the DOM while applying effects like fading or sliding.
• The two primary methods for this are:
• fadeOut() followed by remove(): Gradually fades out an element and
then removes it from the DOM.
• slideUp() followed by remove(): Slides an element up and then
removes it from the DOM.
Example
<html>
<head>
<script>
<script $(document).ready(function() {
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style> $(".item").click(function() {
.item {
width: 300px; padding: 15px; $(this).fadeOut("slow",
margin: 10px auto; text-align: center; function() {
background-color: lightcoral;
color: white; font-size: 18px; $(this).remove();
border-radius: 5px; cursor: pointer;
}
});
</style> });
</head>
<body>
<div class="item">Item 1 (Click to delete)</div>
<div class="item">Item 2 (Click to delete)</div>
</script>
<div class="item">Item 3 (Click to delete)</div> </body>
</html>
Custom animation
• In jQuery, you can create custom animations using the animate() method. This method
allows you to define multiple CSS properties and their target values, as well as control the
duration and easing of the animation.
• Syntax of animate()
$(selector).animate(properties, duration, easing, complete);
• properties: An object specifying the CSS properties to animate and their target values.
• duration: The speed of the animation ("slow", "fast", or a value in milliseconds like 1000).
• easing (optional): Specifies the easing function for the animation (e.g., "swing" or "linear").
• complete (optional): A callback function to execute after the animation is complete.
Example
<html lang="en"> <script>
<head> $(document).ready(function() {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $("#animateBtn").click(function() {
<style> $("#box").animate(
#box { {
width: 100px; width: "200px", // Increase width to 200px
height: 100px; height: "200px", // Increase height to 200px
background-color: lightblue; left: "100px", // Move 100px to the right
position: relative; opacity: 0.5 // Set opacity to 50%
margin: 20px; },
} 1000, // Duration: 1 second
button { "swing", // Easing function: swing
margin: 10px; function() { // Callback function
padding: 10px 20px; alert("Animation Complete!");
font-size: 16px; }
} );
</style> });
</head> });
<body> </script>
<button id="animateBtn">Animate</button> </body>
<div id="box"></div> </html>
Working with events.
• Events in jQuery are actions or occurrences that happen in the
browser, such as clicks, mouse movements, keyboard inputs, form
submissions, and more.
• jQuery simplifies working with events by providing intuitive methods
to handle them.
Commonly Used Event Methods in jQuery
Mouse Events:
• click(): Triggered when an element is clicked.
• dblclick(): Triggered when an element is double-clicked.
• mouseenter() and mouseleave(): Triggered when the mouse enters or
leaves an element.
• hover(): A shorthand for handling both mouseenter and mouseleave.
Keyboard Events:
• keypress(): Triggered when a key is pressed.
• keydown(): Triggered when a key is pressed down.
• keyup(): Triggered when a key is released.
Form Events:
• submit(): Triggered when a form is submitted.
• change(): Triggered when the value of an input, select, or textarea
changes.
• focus() and blur(): Triggered when an input gains or loses focus.
Document/Window Events:
• ready(): Triggered when the DOM is fully loaded.
• resize(): Triggered when the window is resized.
• scroll(): Triggered when the user scrolls.
