Description:
In this article, I will explain how to add
Animation effects using Jquery.
Animation Effect:
This is used to apply custom animation with set of css
properties for the elements.
Syntax: $ (selector).animate (params, speed,
callback)
We can set css properties for the elements using animate ()
method.
$("#btnAnimate").click(function () {
$("div").animate({
height: '100px',
width: "50%",
fontSize: "2em"
}, 'slow');
return false;
});
Animate()
method used to modify an element from one state to another with CSS style
properties.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAnimate").click(function () {
$('#MakeAnimationEffect').animate({ height: '200px' }, "slow");
$('#MakeAnimationEffect').animate({ fontSize: '5em' }, "slow");
return false;
});
});
</script>
<style type="text/css">
#MakeAnimationEffect
{
height: 58px;
background-color: lightgray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="MakeAnimationEffect">
This is the sample
content.
<asp:Button ID="btnAnimate" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Animate Using Jquery , Jquery effect Animation,
Animate method in Jquery, Jquery Animate function example, Animate effects
Using Jquery animate method, Increase font size using Jquery animate method,
Jquery animate function, Increase height using Jquery animate method
0 comments:
Post a Comment