JavaScript and CSS Review (ii) _JAVASCRIPT skills

Visibility: Toggles the element visibility while maintaining the position and space of the element in the normal stream. It has two values: visible (Default) and hidden (not visible),
For example:

Copy Code code as follows:

<p>hello <b>john</b>, how to Are you today?</p>

In the browser is: Hello John, how are you today? Then we set the visibility of John's B to hidden, and it becomes like this.
Hello, how are are you today?
Display: gives us a richer choice of control over the layout of the elements. Can be inline, block, or none (it hides the element entirely from the document, and the result looks like the case where the element was deleted in the document). Or the example above, if we use the Display:none. So the result is
Hello, how are are you today?
Here are two simple functions in the book to show and hide elements

Copy Code code as follows:

Hide elements using display
function Hide (elem) {
Find out the current state 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 ';
}
displaying elements using display
Function Show (elem) {
Set the Display property to its original value
Elem.style.display = elem. $oldDisplay | | ' ';
}

Next we'll look at the transparency opacity, which can add a cool effect to the element ... Look at the following function that sets the transparency of the element.

Copy Code code as follows:

Set the transparency of an element (level from 0-100)
function setopacity (Elem, level) {
If there is filters this attribute, it is IE
if (elem.filters) {
Elem.style.filters = ' alpha (opacity= ' + level + ') ';
else {//otherwise, use the Opacity property of the Consortium
elem.style.opacity = level/100;
}
}

With these methods of adjusting the position, size, and visibility of elements, we can combine them to create animations.

Copy Code code as follows:

function Slidedown (elem) {
Start Sliding from 0 height
Elem.style.height = ' 0px ';
Show the element first (but not see it, because its height is 0)
Show (Elem);
Find the full potential height of the element
var h = fullheight (Elem);
We execute a 20-frame animation in 1 seconds.
for (var i = 0; I <= = 5) {
Ensure that we are able to maintain the proper closure function of ' I '
(function () {
var pos = i;
Set timeout to allow it to move at a specified point in time
settimeout (function () {
Set the new height of the element
Elem.style.height = (pos/100) * H + ' px ';
}, (pos + 1) * 10);
})();
}
}

Here is a concept of closure, it may be difficult to understand, interested in in-depth friends can go to Google, there is no more discussion.
Next, use the SetOpacity function to write a "fade" function:

Copy Code code as follows:

function FadeIn (elem) {
Starting with the 0 transparency
SetOpacity (elem, 0);
Show the element first (but not see it because its transparency is 0)
Show (Elem);
We execute a 20-frame animation in 1 seconds.
for (var i = 0; i < i + 5) {
Ensure that we are able to maintain the proper closure function of ' I '
(function () {
var pos = i;
Sets the timeout to allow it to run within the specified event
settimeout (function () {
SetOpacity (Elem, POS);
}, (pos + 1) * 10);
})();
}
}

For the correctness of the code, I finished after all to test, because found that there will be some small errors, just test the above Slidedown method, should be var h = fullheight (Elem), put the first sentence of the function content, otherwise no effect ....
The second part of the review is here, slowly digestion, learn things can not be anxious to do well.