jQuery has several methods that can be used to adjust the opacity of elements. These methods are just a few of the variety of methods that can be used to create animation effects. The use of jQuery among web designers
continues to be growing in popularity. With regard to fading techniques the typical methods used are fadeIn(), fadeOut(), fadeTo(), and fadeToggle().
Syntax
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
$(selector).fadeToggle(speed,easing,callback)
| Parameter | Description |
|---|
| speed | Optional values in milliseconds, "slow", "normal", and "fast". |
| opacity | Required attribute that specifies the opacity to fade to, between 0.00 and 1.00 |
| easing | Indicates which easing function (swing/linear) to use for the transition |
| callback | An optional function to run after the method is completed |
HTML Example
We will use the following HTML for the examples listed below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="fadeIn.png" />
<img id="img2" src="fadeOut.png" />
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>
FadeIn / FadeOut
In the following example, we will use the click event to trigger the fadeIn() and fadeOut() method on the div element adjacent to the images. Try it yourself by clicking on the In and Out icons below.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeOut();
});
$("#img2").click(function(){
$("div").fadeIn();
});
</script>
Click the icons to fade in or fade out this div element.
FadeTo
In the following example, we will use the click event to trigger the fadeTo() method to apply this fading effect to the adjacent div element. Try it yourself by clicking on the In and Out icons below.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeTo("normal", 0.20);
});
</script>
Click the icon to apply the fadeTo effect to this document.
FadeToggle
The fadeToggle() method animates the opacity of the matched elements. When triggered on an element, the element's display style property is set to none once the opacity reaches 0. Try it yourself by clicking on the In and Out icons below.
<script type="text/javascript">
$("#img1").click(function(){
$("div").fadeToggle("slow", "linear");
});
</script>
Click the icon to apply the fadeToggle effect.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
