Question about transparency settings in native js and jquery _ javascript skills

Sets the transparency problem. Next I will introduce the issues related to setting transparency in native js and jQuery, and note that the problem of setting transparency is often used in daily website development, the simplest is the fade-in and fade-out effect of the image. Next I will introduce the issues and notes related to setting transparency in native js and jQuery:

1. Transparency style settings
Transparency is set differently in IE and other related browsers. IE uses the filter: alpha attribute and firefox uses the opactiy attribute. The following example sets transparency to 30%:
IE: filter: alpha (opacity: 30 );
Firefox: opacity (0.3 );

2 native js sets transparency
To be compatible with the transparency settings of IE and other browsers, we need to set the above two styles separately;

The Code is as follows:

Var alpha = 30; // transparency value variable
Var oDiv = document. getElementById ('p1'); // get the DOM Element Object
ODiv. style. filter = 'Alpha (opacity: '+ alpha +') '; // sets the IE transparency.
ODiv. style. opacity = alpha/100; // sets transparency such as fierfox. Note that the transparency value is decimal.

3 jQuery sets transparency
JQuery integrates transparency settings. compatible with IE and other browsers, you can modify the opactiy attribute value and the value is decimal. Therefore, you only need to set it once;

The Code is as follows:

$ (Function (){
$ ("# P1" 2.16.css ("opacity", "0.3"); // sets transparency
});

4. Example
The example uses native js to implement a p fade-in and fade-out effect. Move the mouse to the p area with a transparency of 100%, move the mouse to the p area with a transparency of 30%, and control the transparency conversion effect with time;

The Code is as follows:

Window. onload = function ()
{
Var oDiv = document. getElementById ('p1'); // get the DOM object of p
ODiv. onmouseover = function () // move the cursor
{
StartMove (100 );
};
ODiv. onmouseout = function () // mouse Removal Method
{
StartMove (30 );
};
}

Var timer = null; // time object
Var alpha = 30; // The initial transparency value.
Function startMove (iTarget)
{
Var oDiv = document. getElementById ('p1 ');
ClearInterval (timer); // clears the time object
Timer = setInterval (function (){
Var speed = 0;
If (alpha <iTarget)
{
Speed = 5;
}
Else
{
Speed =-5;
}

If (alpha = iTarget)
{
ClearInterval (timer );
}
Else
{
Alpha + = speed; // The transparency value increases the effect.
ODiv. style. filter = 'Alpha (opacity: '+ alpha +') '; // sets the IE transparency.
ODiv. style. opacity = alpha/100; // set other browsers
}
}, 30 );
}