visibility：在切换元素可见性的同时会保持元素在普通流中的位置和空间。它有两个值：visible（默认的）和hidden（不可见的），
例如：
复制代码 代码如下: <p>Hello <b>John</b>, how are you today？</p>
浏览器中是：Hello John, how are you today？ 接着我们把John所在b的visibility设置为hidden后，就会变成这样
Hello , how are you today？
display:为我们控制元素的布局提供了更丰富的选择。可以是inline、block或是none（它完全从文档中隐藏了元素,结果跟从文档中删除了该元素的情形看起来一样）。还是上面的例子，如果我们用了display:none。那么结果是
Hello , how are you today？
下面给出书中两个简单函数用于显示和隐藏元素
复制代码 代码如下://使用display隐藏元素
function hide（elem） {
//找出元素display的当前状态
var curDisplay = getStyle（elem, "display"）;
//记录它的display状态
if（curDisplay ！= "none"）
elem.$oldDisplay = curDisplay;
//设置display为none
elem.style.display = "none";
}
//使用display显示元素
function show（elem） {
//设置display属性为它的原始值
elem.style.display = elem.$oldDisplay || " ";
}
接下来我们来研究下透明度opacity，这可以给元素添加一个很cool的效果...看下下面这个设置元素透明度的函数。
复制代码 代码如下://设置元素的透明度（级别从0-100）
function setOpacity（elem, level） {
//如果存在filters这个属性，则它是IE
if（elem.filters） {
elem.style.filters = "alpha（opacity=" + level + "）";
} else { //否则,使用W3C的opacity属性
elem.style.opacity = level / 100;
}
}
有了这些调整元素位置、尺寸和可见性的方法，我们就能把它们结合起来创建动画。
复制代码 代码如下: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"的闭包函数
（function（） {
var pos = i;
//设置timeout以让它能在指定的时间点运动
setTimeout（function（） {
//设置元素新的高度
elem.style.height = （pos / 100） * h + "px";
}, （pos + 1） * 10）;
}）（）;
}
}
这里有个闭包的概念，理解起来可能有些难度，感兴趣深入的园友可以去Google下，这里就不多讨论了。
接下来用setOpacity函数写个"渐显"函数：
复制代码 代码如下: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）;
}）（）;
}
}
为了代码的正确性,我写完后都去测试一下，因为发现书中会有些小错误,刚测试完上面的slideDown方法，应该把var h = fullHeight（elem）;放到函数内容的第一句，不然没效果....
第二部分的复习就到这里，慢慢消化，学东西可不能急于求成哦。
易网时代-编程资源站