有了构建动态页面的基本能力，接下来实现Web应用程序中最流行、最显著的效果：动画。巧妙地使用动画可以为用户提供十分有用的反馈，可以把用户的注意力吸引到指定的元素上来。
滑动
第一个动画是把一个隐藏元素（display:none）显示出来。即将指定的元素在短时间内随着高度的增加而逐步显现。使用滑动效果，提供了更为平滑的用户视觉体验。
function slideDown( elem ) {
// 从0高度开始滑动
elem.style.height = ‘0px’;
// 显示元素( 高度为0所以元素不可见)
show( elem );
// 找到元素完整的潜在高度
var h = fullHeight( elem );
// 在1秒内执行一个20帧的动画
for ( var i = 0; i <= 100; i += 5 ) {
//能够正确引用 i 变量的闭包
var pos = i;
// 设置 timeout 以让它能在指定的时间点运行
setTimeout(function(){
// 设置元素的新高度
elem.style.height = ( pos / 100 ) * h ) + "px";
}, ( pos + 1 ) * 10 );
})();
}
}
[/code]
渐显
渐显与滑动效果类似，只不过利用了setOpacity()函数改变了透明度而不是高度。这个函数显示一个隐藏的元素并使透明度从0（完全透明）到100%（完全不透明）逐渐显现。
[code lang="js"]
function fadeIn( elem ) {
// 从 0 透明度开始
setOpacity( elem, 0 );
// 显示元素(因为透明度为0所以不可见)
show( elem );
// 在1秒内执行一个20帧的动画
for ( var i = 0; i <= 100; i += 5 ) {
// 能够正确引用 i 变量的闭包
(function(){
var pos = i;
// 设置 timeout 以让它能在指定的时间点运行
setTimeout(function(){
//设置元素的新透明度
setOpacity( elem, pos );
}, ( pos + 1 ) * 10 );
})();
}
}
[/code]
转载请注明：陈童的博客 » JavaScript与CSS — 实现动画
