Wednesday, January 9, 2013

Jquery Animation

Jquery Animation



Now it is very easy to use and animate images or text without write so many lines.You have to add jquery min library as usual and use animate () function. Jquery Animation is very simple and easy to use.


blow code is for animate top :

$("#content").animate({"top":"-200px"}, "slow");
you can pass the attributes right ,left and bottom.
<script>
$(document).ready(function(){
var opened = false;
var divheight= $("#panel").height()+ $("#content").height();
$("#middle").click(function(){
if(opened){
$("#content").animate({"top": "+=100px",height:'100'}, "slow");
}else{
$("#content").animate({"top": "-=100px",height:divheight}, "slow");
}
$("#panel").slideToggle("slow");
$("#panel .close").toggle();
opened = opened ? false : true;
});
});
</script>

<div id="panel"></div>
<div id="middle"></div>
<div id="content" style="height:100px;"></div>

try and enjoy :)