Javascript and CSS Review (2) _ javascript skills

Next we will discuss the element visibility. CSS has two different ways to effectively hide elements. They have their own characteristics, which will lead to different results. 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:

The Code is as follows:

HelloJohn, How are you today?

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 a richer choice for the layout of our control 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 in the book are used to show and hide elements.

The Code is as follows:

// Hide the element using display
Function hide (elem ){
// Find the current display status of the element.
Var curDisplay = getStyle (elem, 'display ');
// Record its display status
If (curDisplay! = 'None ')
Elem. $ oldDisplay = curDisplay;
// Set display to none
Elem. style. display = 'none ';
}
// Use display to display elements
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 transparency of the element below.

The Code is as follows:

// Sets the transparency of an element (the level ranges from 0 to 100)
Function setOpacity (elem, level ){
// If the filters attribute exists, it is IE
If (elem. filters ){
Elem. style. filters = 'Alpha (opacity = '+ level + ')';
} Else {// otherwise, use the W3C opacity attribute
Elem. style. opacity = level/100;
}
}

With these ways to adjust the position, size, and visibility of elements, we can combine them to create an animation.

The Code is as follows:

Function slideDown (elem ){
// Slide from 0
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 );
// 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 be moved at the specified time point
SetTimeout (function (){
// Set the new height of the element
Elem. style. height = (pos/100) * h + 'px ';
}, (Pos + 1) * 10 );
})();
}
}

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:

The 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.