Posted on: December 3, 2009 at 12:00 AM
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></
body></
html>
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
