jQuery Fading Effect
FREE
Overview
We can apply many effects to web pages with the help of jQuery. Some of the important types of jQuery effects are fading, sliding, hiding/showing, and animation. We have different methods in jQuery for creating effects on a web page.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Introduction to Fading Effects
The interactivity of a website can be enhanced using jQuery effects. jQuery provides a way for performing numerous spectacular effects such as show, hide, fade-in, fade-out, slide-up, slide-down, toggle, and so on. Using jQuery methods, we can easily apply generally used effects without much effort.
In this lesson, let's go through the essential jQuery methods for creating fading effects. Fading mostly affects the opacity of specific elements.
We can use jQuery to fade in and out elements based on their opacity. There are numerous methods in jQuery that will assist us in achieving the fading effect. We will see examples of each method.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
List of jQuery Fading Methods
The following fading methods are available in jQuery:
- fadeIn() - Use this function to display the matching components with a fade-in effect.
- fadeOut() - Use the fade-out / translucent effect to hide the matched components.
- fadeToggle() - Toggles between the fadeIn() and fadeOut() functions with fadeToggle().
- fadeTo() - Sets the opacity of the matched components.
jQuery fadeIn() Method (Syntax + Example)
Fade the matched pieces to opaque to show them off. The method .fadeIn() animates the opacity of the matching items. It is identical to the .fadeTo() method, except that it does not unhide the element and does not allow you to select the ultimate opacity level.
Durations are indicated in milliseconds here. The greater the values are, the slower the animations work. The strings 'quick' and ‘slow' denote periods of 200 and 600 milliseconds, respectively. If no additional string is supplied, or if the duration parameter is omitted, 400 milliseconds is used as the default value of the duration parameter.
Syntax
Method parameters:
- duration: A text or number that defines how long the animation will last.
- complete: Run this procedure once per each matching element once the animation is finished.
Example:
The code given below animates hidden divs to fade in one by one, each animation taking 600 milliseconds to complete.
You can view the output by running this code on any browser.
Turn Learning into Career Growth
jQuery fadeOut() Method (Syntax + Example)
Fade the matched items to transparent to hide them. The .fadeOut() method changes the opacity of the matched components in real time. When the opacity hits zero, the display style property is set to none, and the element no longer impacts the page layout.
Durations are indicated in milliseconds. The greater the values are for the duration, the slower the animations work. The strings 'quick' and ‘slow' represent periods of 200 and 600 milliseconds, respectively. 400 milliseconds is used as the default value of the duration parameter if no additional string is supplied or if the duration parameter is omitted.
Syntax:
Method Parameters:
- duration: A text or number that specifies how long the animation will last.
- easing: A string depicting which transition easing function to employ.
- complete: Once the animation is finished, run this procedure once per each matching element.
Example:
You can see the output by running the above code on a web browser. The paragraph will fade away once you click on it.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
jQuery fadeToggle() Method (Syntax + Example)
By animating the opacity of the matching items, you can show or conceal them. The .fadeToggle() method changes the opacity of the matched items in real time. When called, the method will fade in the element to display it and fade out the element to hide it, alternatively.
Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and slow' indicate periods of 200 and 600 milliseconds, respectively.
Syntax:
- duration: A text or number that specifies how long the animation will last.
- easing: A string depicting which transition easing function to employ.
- complete: Once the animation is finished, run this procedure once per each matching element.
Example:
In the example given below, the element fades in or out of the first paragraph, completing the animation in 600 milliseconds and using linear easing. The last paragraph is in or out, in 200 milliseconds, inserting a "completed" message upon completion.
You can run the above code on a web browser to see the output.
jQuery fadeTo() Method (Syntax + Example)
This method increases or decreases the opacity of the matched items. The .fadeTo() method changes the opacity of the matched items in real-time. It is comparable to the .fadeIn() method. However, that technique always unhides the element and fades to 100% opacity.
Durations are indicated in milliseconds. The greater the values for duration are, the slower the animations work. The strings 'quick' and slow' denote periods of 200 and 600 ms, respectively. A duration of 400 milliseconds is utilized if no string is provided. Unlike the other effect methods, .fadeTo() requires an explicit duration to be given.
Syntax:
- duration: A string or number that specifies how long the animation will last.
- opacity: A number between 0 and 1 indicating the desired opacity.
- complete: When the animation is finished, call this function.
Example:
In the example code given below, the first paragraph is animated to fade to an opacity of 0.33 (33%, about one-third visible), with the animation completed in 600 milliseconds.
You can view the output by running this code on a browser.
Conclusion
- In this article, we have learned how to apply jQuery fading effects to make your websites more interactive.
- jQuery provides several methods to apply fading effects such as fadeIn(), fadeOut(), fadeToggle(), fadeTo(), etc.
- You can now start using these jQuery fading effects to add some functionalities to your web applications.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more