Boolean_Type,
Вариант на основе темы
Дёрганье при смене анимации
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<meta charset='utf-8'>
<style>
html, body{
height:100%;
margin:0;
padding:0;
}
#right_menu, li{
margin:0;
padding:0;
display:block;
}
#right_menu{
overflow: hidden;
width:70px;
height:125px;
background-color:#cccccc;
border:2px solid;
border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
padding-left:50px;
}
li{
width:65px;
margin:5px;
font-family:arial, sans-serif;
font-size:10pt;
text-indent:5px;
}
li:hover{
background-color:navy;
color:white;
}
#b{
top:50px;
left:10px;
}
</style>
<script>
function animate(opts) {
clearInterval(opts.el.timer);
var start = new Date;
var delta = opts.delta || linear;
var height = parseFloat(opts.el.style.height);
opts.el.timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress),height );
if (progress == 1) {
clearInterval(opts.el.timer);
opts.complete && opts.complete();
}
}, opts.delay || 20);
}
function elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
}
function linear(progress) {
return progress
}
function quad(progress) {
return Math.pow(progress, 2)
}
function quint(progress) {
return Math.pow(progress, 5)
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2
else
return (2 - delta(2*(1-progress))) / 2
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress)
}
}
window.onload = function() {
var input = document.getElementById("b");
var menu = document.getElementById("right_menu");
var body = document.body;
var n = 0;
input.onclick = function(){
n ^= 1;
var to = n ? 0 : 125,
display = n ? "none" : "block";
!n && (menu.style.display = display)
animate({
el : menu,
duration: 1000,
delta: makeEaseInOut(linear),
step: function(delta,height) {
menu.style.height = delta*(to-height)+height+"px";
},
complete : function() {menu.style.display = display}
})
};
body.onclick = function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target!=input && target!=menu &&!n && target.tagName != 'LI') input.onclick()
}
}
</script>
</head>
<body>
<input type='button' id='b' value = 'Click'>
<ul id='right_menu' style="height: 125px">
<li>Effect 1</li>
<li>Effect 2</li>
<li>Effect 3</li>
<li>Effect 4</li>
</ul>
</body>
</html>