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