i have the following jquery:
$(document).ready(function(){
$("#header").hover(function(){
var header=$("#header");
header.animate({left:'500px',opacity:'0.5', height:'50px', width:'200px' },"slow");
$("#footer").slideToggle("slow");
header.animate({fontSize:'2em'},"slow");
});
<style>
#header,#footer
{
width:100px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#footer
{
height:100px;
padding:50px;
display:none;
}
</style>
<body>
<div id="header">Rollover</div>
<div id="footer">panel</div>
</body>
</html>
the panel (footer) slides up and down once i move the mouse over it, and the header is animating (enlarged) what i want to ...
Go to the complete details ...