jquery
  1. jquery-fade
PreviousNext

JQuery Fade

JQuery Fade is a popular animation effect that allows you to add fading animations to your website or web application. You can use this effect to add visual interest and improve the user experience of your website.

Syntax

Here is the basic syntax for the JQuery Fade effect:

$(selector).fadeIn(speed, easing, callback);
$(selector).fadeOut(speed, easing, callback);
  • selector: the element(s) that you want to apply the effect to
  • speed: the duration of the animation in milliseconds
  • easing: the easing function to use for the animation
  • callback: a function to be executed after the animation completes

Use

The JQuery Fade effect is commonly used to add visual transitions to elements on a page, such as images or text. For example, you can use it to fade in a logo or image when a user scrolls down the page, or to fade out a pop-up message or notification.

Example

Here is an example of using JQuery Fade to fade in an image when a user clicks on a button:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myButton").click(function(){
    $("#myImage").fadeIn();
  });
});
</script>

<button id="myButton">Click Me</button>

<img src="example.jpg" id="myImage" style="display:none;">
Try Playground

In this example, we create a button with the ID myButton that, when clicked, triggers the fadeIn() function on the image with the ID myImage. We also set the initial display style of the image to none so that it is not visible until the animation is triggered.

Summary

JQuery Fade is a powerful animation effect that can add visual interest and improve the user experience of your website. With its simple syntax and ease of use, you can quickly and easily add fading animations to elements on your page. Give it a try for your next project!

Hide/ShowSlide
Published on: