Lesson 9 The fade Methods

9.1 The fadeIn() Method

The fadeIn() method is used to fade in a hidden HTML element. It also means making a transparent element opaque. You can add a speed parameter fast, slow or milliseconds using the syntax fadeIn(fast), fadeIn(slow) or fadeIn(n) where n is any positive integer.

Example 9.1

This example fades in a heading, a hidden description and a hidden image.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#twin1").fadeIn();
   $("#btn2").click(function(){
        $("#twin2").fadeIn('slow');
   $("#btn3").click(function(){
		$("#headerImg").fadeIn(3000);
    });
});
</script>
</head>
<body>
<button id="btn1">Click to fade in the hidden heading</button>
<button id="btn2">Click to fade in the hidden description</button>
<button id="btn3">Click to fade in the hidden heading and a hidden image</button>
<h3 id="twin1"  style="display:none">The Twin Towers</h3>
<p id="twin2" style="display:none">Twin towers are the tallest buildings in Malaysia</p>
<img id="twin3" src="twin.jpg" style="display:none; width:50%; height:auto">
</body>
</html>

9.2 The fadeOut() Method

The fadeOut() method is used to fade out an HTML element (to make it transparent. You can add the speed parameter fast, slow or milliseconds.

Example 9.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
        $("#bomb1").fadeOut(4000);
        $("#bomb2").fadeOut("slow");
        $("#bomb3").fadeOut();
    });
});
</script>
</head>
<body>
<img id="bomb1" src="bomb.jpg"><br>
<img id="bomb2" src="bomb.jpg"><br>
<img id="bomb3" src="bomb.jpg"><br>
<button id="btn4">Click to fade out all objects</button>

</body>
</html>

9.3 The fadeToggle() Method

The fadeToggle() method toggles between fadeIn() and fadeOut() methods. You can add speed parameters 'slow', 'fast' or milliseconds.

Example 9.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn5").click(function(){
        $("#bomb4").fadeToggle(4000);
        $("#bomb5").fadeToggle("slow");
        $("#bomb6").fadeToggle();
    });
});
</script>
</head>
<body>
<img id="bomb4" src="bomb.jpg" style="display:none"><br>
<img id="bomb5" src="bomb.jpg" style="display:none"><br>
<img id="bomb6" src="bomb.jpg" style="display:none"><br>
<button id="btn5">Click to fade in and fade out all objects</button>
</body>
</html>

9.4 The fadeTo() Method

The fadeTo() method fade an element to a certain opacity. The value of opacity is between 0 and 1. You can add speed parameters 'slow', 'fast' or milliseconds.

Example 4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn6").click(function(){
        $("#bomb7").fadeTo("fast",0.3);
        $("#bomb8").fadeTo("slow", 0.5);
        $("#bomb9").fadeTo(3000, 0.7);
		});
});
</script>
</head>
<body>
<img id="bomb7" src="bomb.jpg" ><br>
<img id="bomb8" src="bomb.jpg" ><br>
<img id="bomb9" src="bomb.jpg" ><br>
<button id="btn6">Click to fade the images to a certain opacity</button>
</body>
</html>

❮ Previous Lesson Next Lesson ❯