WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Fade

Previous Next

jQuery Fading Effects, which allow you to fade elements in and out smoothly.


jQuery Fading Methods


jQuery has the following fade methods:

Method

Description

fadeIn()

Fades in a hidden element

fadeOut()

Fades out a visible element

fadeToggle()

Fades in/out based on the current visibility

fadeTo()

Fades the element to a specified opacity

jQuery fadeIn() Method


The fadeIn() method is used to gradually make a hidden element visible, with a fading animation effect.


Syntax:


$(selector).fadeIn(speed, callback);



  • speed (optional): "slow", "fast", or time in milliseconds (e.g., 1000)
  • callback (optional): A function to run after the fade-in is complete


The following example demonstrates the fadeIn() method with different parameters:

Example
<script>
$(document).ready(function() {
$("#fadeBtn").click(function() {
$("#box").fadeIn();
$("#box2").fadeIn("slow");
$("#box3").fadeIn(3000);
});
});
</script>
Try it yourself

jQuery fadeOut() Method


The fadeOut() method gradually hides a visible element by reducing its opacity to 0, then sets display: none.


Syntax:


$(selector).fadeOut(speed, callback);



  • speed (optional): "slow", "fast", or milliseconds (e.g., 1000)
  • callback (optional): Function to run after the fade-out is complete


The following example demonstrates the fadeOut() method with different parameters:

Example
<script>
$(document).ready(function() {
$("#fadeBtn").click(function() {
$("#box").fadeOut();
$("#box2").fadeOut("slow");
$("#box3").fadeOut(3000);
});
});
</script>
Try it yourself

jQuery fadeToggle() Method


The fadeToggle() method allows you to toggle between fadeIn() and fadeOut() — meaning it will:

  • Fade out the element if it's visible
  • Fade in the element if it's hidden

All in one method!


Syntax:


$(selector).fadeToggle(speed, easing, callback);


  • speed (optional) – "slow", "fast", or milliseconds (e.g., 1000)
  • easing (optional) – Animation easing ("swing" or "linear")
  • callback (optional) – Function to run after toggle completes


The following example demonstrates the fadeToggle() method with different parameters:

Example
<script>
$(document).ready(function() {
$("#fadeBtn").click(function() {
$("#box").fadeToggle();
$("#box2").fadeToggle("slow");
$("#box3").fadeToggle(3000);
});
});
</script>
Try it yourself

jQuery fadeTo() Method

The fadeTo() method fades an element to a specified opacity (without hiding it completely like fadeOut()).


Syntax:


$(selector).fadeTo(speed, opacity, callback);


  • speed: "slow", "fast", or a number in milliseconds (e.g., 1000)
  • opacity: A number between 0.0 (fully transparent) and 1.0 (fully opaque)
  • callback: Optional function to run after the animation completes


The following example demonstrates the fadeTo() method :

Example
<script>
$(document).ready(function(){
$("#fadeToBtn").click(function(){
$("#box").fadeTo(1000, 0.3);
});
});
</script>
Try it yourself

Previous Next