fadeTo Method in jQuery
The fadeTo
method allows you to reduce the opacity opacity
of an element to a certain value (0
- completely transparent, 1
- completely opaque). The first parameter the method takes is the value to which to change the opacity, and the second is the execution time.
Let's make it so that when we click on a button, our element becomes semi-transparent in 1
seconds. To start, let's take the following HTML code:
<button id="fade">click me</button>
<div id="elem">text...</div>
Let's also say we have CSS:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Now we write the following Javascript code:
$('#fade').click(function() {
$('#elem').fadeTo(1000, 0.5);
});