You are on page 1of 9

jQuery fadeIn()

jQuery fadeIn() method is used to fade in the element.

Syntax:

1. $(selector).fadein();
2. $(selector).fadeIn(speed,callback);
3. $(selector).fadeIn(speed, easing, callback);

speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after


completion of fadein() effect.

Let's take an example to demonstrate jQuery fadeIn() effect.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></scri
pt>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#div1").fadeIn();
9. $("#div2").fadeIn("slow");
10. $("#div3").fadeIn(3000);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeIn() method example with different parameters.</p>
17. <button>Click to fade in boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
19. <div id="div2" style="width:80px;height:80px;display:none;background-
color:green;"></div><br>
20. <div id="div3" style="width:80px;height:80px;display:none;background-
color:blue;"></div>
21. </body>
22. </html>

next →← prev

jQuery fadeOut()
The jQuery fadeOut() method is used to fade out the element.

Syntax:

1. $(selector).fadeOut();
2. $(selector).fadeOut(speed,callback);
3. $(selector).fadeOut(speed, easing, callback);

speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after


completion of fadeOut() effect.

Let's take an example to demonstrate jQuery fadeOut() effect.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></s
cript>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#div1").fadeOut();
9. $("#div2").fadeOut("slow");
10. $("#div3").fadeOut(3000);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeOut() method example with different parameters.</p>
17. <button>Click to fade out boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;background-
color:red;"></div><br>
19. <div id="div2" style="width:80px;height:80px;background-
color:green;"></div><br>
20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
21. </body>
22. </html>

jQuery fadeTo()
jQuery fadeTo() method is used to fading to a given opacity.

Syntax:

1. $(selector).fadeTo(speed, opacity);
2. $(selector).fadeTo(speed, opacity, callback);
3. $(selector).fadeTo(speed, opacity, easing, callback);

speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.

opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after


completion of fadeToggle() effect.

Let's take an example to demonstrate jQuery fadeTo() effect.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></scri
pt>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#div1").fadeTo("slow", 0.3);
9. $("#div2").fadeTo("slow", 0.4);
10. $("#div3").fadeTo("slow", 0.5);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeTo() method example with different parameters.</p>
17. <button>Click to fade boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
19. <div id="div2" style="width:80px;height:80px;background-
color:green;"></div><br>
20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
21. </body>
22. </html>

jQuery fadeToggle() Method


The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut()
methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

Syntax:

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

The optional speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the fading


completes.

The following example demonstrates the fadeToggle() method with different


parameters:

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

});

</script>

</head>

<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

</html>

____________________________________________________________________

JQUERY SLIDE:
SLIDE DOWN

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown("slow");

});

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

#panel {

padding: 50px;

display: none;

</style>

</head>

<body>

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>


</body>

</html>

____________________________________________________________________

SLIDEUP:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideUp("slow");

});

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

#panel {

padding: 50px;

</style>

</head>

<body>
<div id="flip">Click to slide up panel</div>

<div id="panel">Hello world!</div>

</body>

</html>

_______________________________________________________________

SLIDE TOGGLE

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});

});

</script>

<style>

#panel, #flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

#panel {

padding: 50px;

display: none;
}

</style>

</head>

<body>

<div id="flip">Click to slide the panel down or up</div>

<div id="panel">Hello world!</div>

</body>

</html>