Issues related to transparency settings in native js and jquery_javascript skills

In daily development of websites, the issue of setting transparency is often used. The simplest one is the fade-in and fade-out effect of pictures. Below I will introduce the related issues and points of attention when setting transparency in native js and jQuery:

1 Transparency style setting
The setting method of transparency in IE browser and other related browsers is not the same. IE uses the filter: alpha attribute, and Firefox uses the opactiy attribute. The following example sets the transparency to 30%:
IE: filter: alpha(opacity:30);
firefox: opacity(0.3);

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

Copy code The code is as follows:

var alpha = 30; //Transparency value variable
var oDiv = document.getElementById('div1'); //Get the DOM element object
oDiv.style.filter = 'alpha(opacity:' alpha ')'; //Set the transparency of IE
oDiv.style.opacity = alpha / 100; //Set transparency such as fierfox, note that the transparency value is Decimal

3 jQuery setting transparency
jQuery has integrated the transparency setting and is compatible with IE and other browsers. Just modify the opactiy attribute value. The value is a decimal, so it only needs to be set once. That’s it;

Copy code The code is as follows:

$(function(){
$("#div1").css("opacity","0.3"); //Set transparency
});

4 An example
Example uses native js to implement one Fade in and fade out effect of div; when the mouse moves into the div area, the transparency is 100%, when the mouse moves out of the div area, the transparency is 30%, and time is used to control the transparency conversion effect;

Copy code The code is as follows:

window.onload=function()
{
var oDiv = document.getElementById('div1');//Get DOM object of div
oDiv.onmouseover = function() //Mouse move in method
{
startMove(100);
};
oDiv.onmouseout = function() //Mouse move out Method
{
startMove(30);
};
}

var timer = null; // Time object
var alpha = 30; // Initial value of transparency
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);//Clear 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; // Transparency value increasing effect
oDiv.style.filter = 'alpha(opacity:' alpha ')'; //Set IE transparency
oDiv.style.opacity = alpha / 100; //Set other browsers
}
},30);
}