jQuery Animate
This example shows A function for making custom animations.
This example shows A function for making custom animations.jQuery Animate:
In this example each key within the object represents a style property that will also be animated as you see in this example "height", "top" and "opacity" are animated. Properties should be specified using camel case, like as. "marginLeft" instead of "margin-left".
So that when we click on the button the margin, top and opacity are animated which are inside a div. Only properties that take numeric values are supported means backgroundColor is not supported.
Full Code :
<html>
<head>
<script src="../plugin/jquery.js"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
$("#animationblock").animate({
width: "50%",
opacity: 0.3,
marginLeft: "0.5in",
fontSize: "3em",
borderWidth: "8px"
}, 1500 );
});
});
</script>
<style>
div {
background-color:#45DDD8;
width:100px;
border:1px solid red;
}
</style>
</head>
<body>
<button id="click">click here</button>
<div id="animationblock">start animation..</div>
0</body>
</html>
