A variety of buit-in effects functions are provided in jquery.
Here are the list of functions.
Effects
Methods
Example
Hide/Show
$("p").hide();
$("p").show();
Toggle
toggle() - Toggles between fading in and fading out the selected elements.
$("p").toggle();
Fade
$("div").fadeIn();
$("div").fadeOut();
$("div").fadeToggle();
Slide
$("div").slideUp();
$("div").slideDown();
$("div").slideUp();
Animate
animate(properties, duration, easing, complete) - Animates the CSS properties of the selected elements.
$("div").animate({ left: '250px' }, 1000);
Callback Functions
Executes a callback function once the effect is complete.
$("p").hide("slow", function(){ alert("Hidden!"); });
Delay
delay() - Delays the execution of subsequent items in the queue.
$("p").slideUp().delay(1000).slideDown();
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All-in-One jQuery Example</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
}
</style>
</head>
<body>
<!-- HTML content -->
<div id="myDiv">Click me!</div>
<script>
// jQuery code
$(document).ready(function(){
// Event handling - Click
$("#myDiv").click(function(){
// Animation - Move the div to the right
$(this).animate({ left: '250px' }, 1000, function(){
// Callback function - Display an alert after the animation
alert("Animation complete!");
// Change CSS - Update background color
$(this).css("background-color", "lightgreen");
});
});
});
</script>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
