jQuery Effects

A variety of buit-in effects functions are provided in jquery.
Here are the list of functions.

Effects

Methods

Example

Hide/Show

hide() - Hides the selected elements.
show() - Displays the hidden elements.

$("p").hide();
$("p").show();

Toggle

toggle() - Toggles between fading in and fading out the selected elements.

$("p").toggle();

Fade

fadeIn() - Fades in the selected elements.
fadeOut() - Fades out the selected elements.
fadeToggle() - Toggles between fading in and fading out the selected elements.

$("div").fadeIn();
$("div").fadeOut();
$("div").fadeToggle();

Slide

slideUp() - Slides up the selected elements.
slideDown() - Slides down the selected elements.
slideUp() - Toggles between sliding down and sliding up the selected elements.

$("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();

Example

<!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>

Run

Quick Recap - Topics Covered

jQuery Effects

Practice With Examples in Compilers

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.

jQuery Effects

Example

Quick Recap - Topics Covered

Practice With Examples in Compilers

Example JS

Quiz

FOLLOW FOR MORE UPDATES