JQuery animate keyword example
In this example we are going to zoom in and zoom out of image using jquery. At the time of zooming, image will zoom very slow. At the time of zoom out, image will width will go to previous position very fast. This is one of the good JQuery Interview Questions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.sai').width(200);
$('.sai').mouseover(function () {
$('.sai').animate({ width: 500 }, 'slow');
});
$('.sai').mouseout(function () {
$('.sai').animate({ width: 200 }, 'fast');
});
});
</script>
</head>
<body>
<img class="sai" src="Sai.jpg" alt="Sai" />
</body>
</html>
Post a Comment
Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.