In JQuery fadeTo () method used to fade element on page. In this article I am trying to show you, how we can implement fadeTo method on the page. For example I have two images on page and I want to images fade from page to given opacity.
Syntax: $(“target”).fadeTo (Time duration, Opacity);
Time duration=Pass time duration in string (“fast or medium or slow”)
Opacity=Opacity should be between 0 and 1.
Code:
<script type="text/javascript" src="jquery.min.js">
<script type="text/javascript">
$(document).ready(function {
$("button").click(function {
$("img").fadeTo("medium", 0.15); //img will fade by using fadeTo function given time duration and opacity
});
});
</script>
</head>
<body>
<h2>
Jquery fadeTo method</h2>
<table width="300">
<tr>
<td>
<img src="Desert.jpg" width="200" height="100" />
</td>
<td>
<img src="Jellyfish.jpg" width="200" height="100" > </td>
</tr>
<tr>
<td align="center" colspan="2">
<button>
Click to fade</button>
</td>
</tr>
</table>
</body>
Screenshot
When I will click on button image will be start to fade from page as shown below:
Screenshot
No comments:
Post a Comment