BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery Fading Effects

Last Updated: May 7, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery has four useful methods which you can use to fade html elements in and out of visibility.

1. jQuery fadeIn()
2. jQuery fadeOut()
3. jQuery fadeToggle()
4. jQuery fadeTo()

1. jQuery fadeIn()

jQuery fadeIn() method is used to make an html element appear gradually on the screen. For example the following jQuery code will make a paragraph which is initially set to display none to appear on the screen gradually when the button is clicked.

To check out the complete example and more details about fadeIn() refer this: jQuery fadeIn()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeIn();
  });
});

2. jQuery fadeOut()

jQuery fadeOut() method is used to fade out the selected elements of the html page. For example, the following jQuery code will make a paragraph disappear gradually when the button is clicked.

To check out the complete example and more details about fadeOut() refer this: jQuery fadeOut()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut();
  });
});

3. jQuery fadeToggle()

jQuery fadeToggle() method is used to toggle between fadeIn() and fadeOut() effects. If the selected html elements are faded in, it will fade them out and if they are faded out then it will fade them in.

For example, the following jQuery code will toggle a paragraph between fade in and fade out on the button click event, which means if the paragraph is visible, it will make it fade out on button click and if the paragraph is not visible then it will fade in when the button is clicked.

To check out the complete example and more details about fadeToggle() refer this: jQuery fadeToggle()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeToggle();
  });
});

4. jQuery fadeTo()

jQuery fadeTo() method adjust the opacity of selected html elements. It accepts the value between 0 and 1, where 0 means completely invisible and 1 means completely visible. We can pass the values in fraction such as 0.10, 0.34 etc.

For example, in the following code we are adjusting the opacity of three different html elements using fadeTo() method. Here we are adjusting the opacity of p, h2 and button elements, their opacity is adjusted to 0.25, 0.10 and 0.80 respectively, since the opacity of button is highest, it will be more visible compared to p and h2 elements.

To check out the complete example and more details about fadeTo() refer this: jQuery fadeTo()

$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeTo("slow", 0.25);
    $("h2").fadeTo("slow", 0.10);
    $("button").fadeTo("fast", 0.80);
  });
});
❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery fadeOut() Effect
  3. jQuery fadeToggle() Method
  4. jQuery fadeIn() Effect
  5. jQuery toggle() Effect

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap