User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 

jQuery Fading Methods

jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

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.

jQuery fadeIn() Method

The jQuery fadeIn() method is used to fade in a hidden element.

Syntax:

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

jQuery fadeOut() Method

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

Syntax:

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade 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 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);

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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 fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

Syntax:

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

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade 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>

 

Recent Topics
Subject
Post Reply
Open
Recent
Template Megadeal of MooZiiCart for creating websites to sell products online
By prmindphp Fri 03 Apr 2020 6:45 pm Board English Language
0
5
Fri 03 Apr 2020 6:45 pm By prmindphp
Displaying products that customers are interested by Wishlist Module
By prmindphp Fri 27 Mar 2020 5:46 pm Board English Language
0
112
Fri 27 Mar 2020 5:46 pm By prmindphp
Show the Bestsellers Product by Module Bestseller
By prmindphp Wed 25 Mar 2020 6:04 pm Board English Language
0
82
Wed 25 Mar 2020 6:04 pm By prmindphp
Show Products Category by Module Category
By prmindphp Tue 24 Mar 2020 6:07 pm Board English Language
0
78
Tue 24 Mar 2020 6:07 pm By prmindphp
Plugin System MZC Auto Close to enable the open and close odering system
By prmindphp Wed 19 Feb 2020 6:38 pm Board English Language
0
1802
Wed 19 Feb 2020 6:38 pm By prmindphp
MDPartner Component for store client data in CRM system
By prmindphp Sat 25 Jan 2020 3:04 pm Board English Language
0
470
Sat 25 Jan 2020 3:04 pm By prmindphp
i am looking for help
By Anonymous Tue 14 Jan 2020 5:46 pm Board English Language
1
465
Tue 14 Jan 2020 6:03 pm By noppadonsk
Dot Net Training
By Poonaam Fri 10 Jan 2020 2:20 pm Board English Language
0
555
Fri 10 Jan 2020 2:20 pm By Poonaam
MDRental, Area management assistant for rental business
By prmindphp Wed 08 Jan 2020 6:51 pm Board English Language
0
469
Wed 08 Jan 2020 6:51 pm By prmindphp
Fix Gmail Error 404 By Taking Gmail Help Quickly
By Anonymous Wed 08 Jan 2020 2:56 pm Board English Language
0
475
Wed 08 Jan 2020 2:56 pm By Anonymous
How To Add New Facebook Friends using Facebook Phone Number?
By Anonymous Tue 07 Jan 2020 4:20 pm Board English Language
0
468
Tue 07 Jan 2020 4:20 pm By Anonymous
DBA Training Institute
By Shrutiii Wed 01 Jan 2020 3:06 pm Board English Language
0
508
Wed 01 Jan 2020 3:06 pm By Shrutiii
Tools for calculating the withholding tax easily reduce large tax
By prmindphp Wed 25 Dec 2019 6:56 pm Board English Language
0
487
Wed 25 Dec 2019 6:56 pm By prmindphp
Helper to calculate interest rates for investors
By prmindphp Tue 24 Dec 2019 6:52 pm Board English Language
0
527
Tue 24 Dec 2019 6:52 pm By prmindphp
Plan your savings easily with FV (Future Value) Calculator
By prmindphp Mon 23 Dec 2019 7:28 pm Board English Language
0
462
Mon 23 Dec 2019 7:28 pm By prmindphp
Payment Calculator, Installment calculation to make decisions
By prmindphp Fri 20 Dec 2019 6:00 pm Board English Language
0
504
Fri 20 Dec 2019 6:00 pm By prmindphp
Program Calculate Home Loan, Tools that will help you calculate home loans easily and quickly
By prmindphp Thu 19 Dec 2019 6:59 pm Board English Language
0
528
Thu 19 Dec 2019 6:59 pm By prmindphp
The website loads slowly ? The image size is not proportional, MImageoptimize Plugin of Joomla can help
By prmindphp Tue 17 Dec 2019 7:05 pm Board English Language
0
505
Tue 17 Dec 2019 7:05 pm By prmindphp
Calculation program Number of Periods (NPER)
By prmindphp Mon 16 Dec 2019 7:21 pm Board English Language
0
574
Mon 16 Dec 2019 7:21 pm By prmindphp
Calculation program after including VAT
By prmindphp Fri 13 Dec 2019 5:32 pm Board English Language
0
715
Fri 13 Dec 2019 5:32 pm By prmindphp