Today I am going to demonstrate 'Slide to reveal a panel' using jquery's animate function.
Its already known that major libraries like jquery mobile itself provides this feature.
but for bare minimum's sake, the same can be achieved by the following demo.
and it also works on touch devices as well !
Libraries required
So lets get started !
First lets setup our page structure
It consists of a main panel wrapper div and two children divs who are going to act as panels.
CSS, the main essence here
Now lets add some Jquery goodness for the actual animation effect.
The final result
Its already known that major libraries like jquery mobile itself provides this feature.
but for bare minimum's sake, the same can be achieved by the following demo.
and it also works on touch devices as well !
Libraries required
So lets get started !
First lets setup our page structure
It consists of a main panel wrapper div and two children divs who are going to act as panels.
<!Doctype html> <html> <head> <script type="text/javascript" src="js/jquery.js"></script> //jQuery-Animate-Enhanced needed to run hardware accelerated animations on mobile devices. <script type="text/javascript" src="js/jQuery-Animate-Enhanced.js"></script> </head> <body> <div class="panels_wrapper"> <div class="top_panel"></div> <div class="bottom_panel"></div> </div> </body> </html>
CSS, the main essence here
.panels_wrapper
{
border:1px solid lightgray;
width:100%;
height:400px;
position:relative;
z-index:0;
overflow:hidden;
}
.top_panel
{
border:1px solid lightgray;
height:400px;
width:100%;
z-index:2;
background-color:#f8f8f8;
position:relative;
}
.bottom_panel
{
border:1px solid lightgray;
width:100%;
height:100px;
position:absolute;
bottom:0px;
z-index:-1;
background-color:#808080;
}
Now lets add some Jquery goodness for the actual animation effect.
var bottomIsVisible = false;
$(".top_panel").click(function(){
if (bottomIsVisible == false){
$(this).animate({top: '-100px'},250);
bottomIsVisible = true;
}
else{
$(this).animate({top: '0px'},250);
bottomIsVisible = false;
}
});
The final result
No comments:
Post a Comment