JavaScript and CSS Review (2)

Visibility: When you switch the visibility of an element, the position and space of the element in the normal stream are maintained. It has two values: visible (default) and hidden (invisible ),
For example: CopyCode The Code is as follows: <p> Hello <B> JOHN </B>, how are you today? </P>

in the browser: Hello John, how are you today? After we set visibility of John's B to hidden, it will become like this
hello, how are you today?
display: provides more options for controlling the layout of elements. It can be inline, block, or none (it completely hides an element from the document, and the result looks the same as if the element is deleted in the document ). In the above example, if we use display: none. The result is
hello, how are you today?
the following two simple functions are used to show and hide elements in the book. copy Code the code is as follows: // hide an element using display
function hide (ELEM) {
// locate the current status of the element display
var curdisplay = getstyle (ELEM, 'display ');
// record its display status
If (curdisplay! = 'None')
ELEM. $ olddisplay = curdisplay;
// set display to none
ELEM. style. display = 'none';
}< br> // use the display element
function show (ELEM) {
// set the display attribute to its original value
ELEM. style. display = ELEM. $ olddisplay | '';
}

next we will study the transparency opacity, which can add a cool effect to the element... let's look at the function that sets the element transparency below. copy Code the code is as follows: // sets the transparency of an element (the level ranges from 0 to 100)
function setopacity (ELEM, level) {
// If filters exists, then it is ie
If (ELEM. filters) {
ELEM. style. filters = 'Alpha (opacity = '+ level +') ';
}else {// otherwise, use the W3C opacity attribute
ELEM. style. opacity = level/100;
}< BR >}

with these methods to adjust the position, size, and visibility of elements, we can combine them to create an animation. copy Code the code is as follows: function slidedown (ELEM) {
// slide from 0 height
ELEM. style. height = '0px ';
// display the element first (but cannot see it because its height is 0)
show (ELEM );
// locate the full potential height of the element
var H = fullheight (ELEM );
// execute a 20-Frame Animation in one second
for (VAR I = 0; I <= 100; I ++ = 5) {
// ensure that we can maintain the correct 'I' closure function
(function () {
var Pos = I;
// set timeout so that it can be moved at a specified time point
setTimeout (function () {
// set the new height of the element
ELEM. style. height = (POS/100) * H + 'px ';
}, (Pos + 1) * 10);
})();
}< BR >}

There is a closure concept here, which may be difficult to understand. If you are interested, you can go to Google. We will not discuss it here.
Next, use the setopacity function to write a "Fade-in" function:Copy codeThe Code is as follows: function fadein (ELEM ){
// Starts with 0 transparency
Setopacity (ELEM, 0 );
// Display the element first (but cannot see it, because its transparency is 0)
Show (ELEM );
// We can execute a 20-Frame Animation in one second.
For (VAR I = 0; I <100; I + = 5 ){
// Ensure that we can maintain the correct 'I' Closure Function
(Function (){
VaR Pos = I;
// Set timeout so that it can run in the specified event
SetTimeout (function (){
Setopacity (ELEM, POS );
}, (Pos + 1) * 10 );
})();
}
}

To ensure the correctness of the code, I will test it after writing it, because there will be some small errors in the book. After testing the slidedown method above, we should set var H = fullheight (ELEM ); put it in the first sentence of the function content, otherwise it will not work ....
The second part of the review is here, slowly digest, learning east and west can not be eager for success.